标签:function const name useMemo 重复 useState 志玲 组件 return
父组件里任何一个状态发生变化,子组件里的方法或者代码都会重新渲染一遍(性能问题)
shouldCompnentUpdate 组件更新前
对比状态 需要 useEffect 父子组件 方法()
请求数据 useMemo解决重复执行问题
副作用展示:
import React ,{useState} from 'react' //imr function MemoDome(){ const [xiaohong,setXiaohong]=useState("小红在待客状态") const [zhiling,setZhiling]=useState("志玲在待客状态") return( <> {/* 类似于React.Fragment */} <button onClick={()=>{setXiaohong(new Date().getTime())}}>小红</button> <button onClick={()=>{setZhiling(new Date().getTime()+'志玲向我们走来')}}>志玲</button> <ChildComponent name={xiaohong}>{zhiling}</ChildComponent> </> ) } function ChildComponent({name,children}){ function changeXiaohong(){ console.log(`她来了,她来了,小红向我们走来了`) return name+',小红向我们走来了' } const actionXiaohong =changeXiaohong(name); return( <> <div>{actionXiaohong}</div> <div>{children}</div> </> ) } export default MemoDome
使用useMemo后
import React ,{useState,useMemo,useEffect} from 'react' //imr function MemoDome(){ const [xiaohong,setXiaohong]=useState("小红在待客状态") const [zhiling,setZhiling]=useState("志玲在待客状态") return( <> {/* 类似于React.Fragment */} <button onClick={()=>{setXiaohong(new Date().getTime())}}>小红</button> <button onClick={()=>{setZhiling(new Date().getTime()+'志玲向我们走来')}}>志玲</button> <ChildComponent name={xiaohong}>{zhiling}</ChildComponent> </> ) } function ChildComponent({name,children}){ function changeXiaohong(){ console.log(`她来了,她来了,小红向我们走来了`) return name+',小红向我们走来了' } // const actionXiaohong =useEffect(()=>changeXiaohong(name),[name]); //后面加数组即为数组里的值发生变化时触发方法。 const actionXiaohong =useMemo(()=>changeXiaohong(name),[name]); return( <> <div>{actionXiaohong}</div> <div>{children}</div> </> ) } export default MemoDome
标签:function,const,name,useMemo,重复,useState,志玲,组件,return 来源: https://www.cnblogs.com/Jarsmine/p/16284988.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。