网上的教程比较乱。还是希望大家可以手动敲代码体验一下。印象更好。React.memo和useMemo都减少了组件中不必要的开销，提高了性能。其中memo是子组件本身是否渲染。useMemo是子组件prop监控函数memomemo和shouldComponentUpdate的生命周期很相似也是判断组件是否渲染不使用memoconstChild=({name,children}:any)=>{functionchangeName(name:string){console.log("更改名称");returnname+"改名方法";}console.log("子组件更新");constotherName=changeName(名称);返回(<>
{otherName}
{children}
);};functionParent(){const[count,setCount]=useState(0);常量[名称,设置名称]=useState("名称");返回(<>{count}
{otherName}
{children}
);});clickbtn1,Child不会被触发useMemouseMemo更具体的是组件内部的调用方法constChild=({name,children}:any)=>{functionchangeName(name:string){console.log("changeName");returnname+"改名方法";}console.log("子组件更新");constotherName=changeName(名称);返回(<>{otherName}
{children}
);};functionParent(){const[name,setName]=useState("name");const[内容,setContent]=useState("内容");返回(<>{otherName}
{children}
);};但是当我们点击btn2时，只会触发Child组件更新