使用ReactHooks时，函数组件的使用频率更高。当遇到组件重复渲染的问题时，不像类组件，可以使用生命周期函数shouldComponentUpdate或者extendsReact.PureComponent来解决重复渲染问题。使用React.memo()前后效果对比比如一个父组件Home渲染了一个子组件List，Home组件还有一个计数器组件，每点击一次就会加1。遇到类似的场景，就会出现子组件重复渲染的问题，这是因为在React中，当父组件的一个状态发生变化时，无论是否与子组件相关，子组件都会受到影响，重新渲染，这也是React中的默认行为。函数组件中的解决方案是使用React.memo()函数，传入需要优化的函数组件即可。importReact,{useEffect,useState}from"react";//不使用memo:constList=({dataList})=>{constList=React.memo(({dataList})=>{console.log("列表渲染");return(
{dataList.map((item)=>({item.title}))}
);});constHome=()=>{const[count,setCount]=useState(0);const[dataList,setDataList]=useState([]);useEffect(()=>{constlist=[{title:"React性能优化",id:1},{title:"Node.js性能优化",id:2},];setDataList(list);},[]);返回(
setCount(count+1)}>count:{count}
);};导出默认首页；使用React.memo()之前和之后。image.png自定义控件比较过程函数React.memo()还提供了第二个参数propsAreEqual，用于自定义控件比较过程。//React.memo()函数的TypeScript类型描述=>布尔值）：MemoExoticComponent
；React.memo无效首先是React.memo对普通引用类型无效。比如给List组件添加一个user属性，即使使用了React.memo()，每点击一次计数，List组件都会重复渲染。constHome=()=>{constuser={name:'haha'};...返回(
);};与React.memo()结合使用时，普通的引用类型对象需要通过useMemo和useState处理，避免组件重复渲染。constuser=useMemo(()=>({name:"haha"}),[]);const[user]=useState({name:"haha"});还有一种情况是functiongroup包含一些useState,useContext等Hooks，当context发生变化时，组件也会重新渲染，React.memo这里只是比较props。在上面的例子中，如果将按钮组件放在List组件中，List每次被点击时仍然会重新渲染。constList=React.memo(({dataList})=>{console.log("Listrender");const[count,setCount]=useState(0);return(setCount(count+1)}>列表计数：{count}{dataList.map((item)=>({item.title}))}
);});总结React.memo()是一个高阶组件，它接受一个组件并返回一个新组件。它会记住上次该组件的Props，并与下次需要更新的Props做一个“浅比较”。如果相同则不会更新，只有不同时才会重新渲染。如果你的组件有一些耗时的计算，并且每次重新渲染显然对页面性能不利，那么React.memo()可能是你不错的选择。并不是所有的组件都需要引入React.memo()，浅比较的过程本身也会消耗一些消耗。如果没有特殊要求，可以不使用。
