©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>一、场景案例
<>描述：
画面上存在多个卡片（卡片是动态渲染的），每个卡片有自己的相关操作，比如，点击卡片的菜单项，出现弹框，弹框中需要填入相关的信息，在输入信息的过程中会出现一个字一个字出来的卡顿效果，或者是点击卡片菜单项，弹框出现的时候比较卡顿等
<>二、解决方案–React.memo
<>1. 作用
React.memo为高阶组件，主要作为性能优化的方式存在
<>2. 用法
* 该方法接收两个参数，第二个参数可选，如： React.memo(MyComponent, areEqual)
* 当areEqual的返回值为true时，不会触发重新渲染，返回false的时候，会触发重新渲染
* 默认情况下，被React.memo包裹的组件，只会进行浅比较，如果我们需要自定义比较方式，此时就需要使用areEqual方法进行比较判定
*
如果我们的组件中，存在useState、useReducer或者useContext的hook，当state或context发生变化时，即使它被React.memo包裹，它仍会重新渲染
<>3. 案例 function MyComponent(props) { /* 使用 props 渲染 */ } function
areEqual(prevProps, nextProps) { /* 如果把 nextProps 传入 render 方法的返回结果与 将
prevProps 传入 render 方法的返回结果一致则返回 true， 否则返回 false */ } export default
React.memo(MyComponent, areEqual); <>4. 注意
不要把 React 的 memo API 和 useMemo Hook 混淆了。React memo 用于把 React 组件包裹起来以防止重新渲染，而
useMemo 用于把数值记忆化。
<>三、总结
React.memo() 是一个高阶组件，接收一个组件并返回一个新组件。它会记忆组件上次的 Props，同下次需要更新的 Props 做
“浅对比”，如果相同就不做更新，只有在不同时才会重新渲染。如果你的组件存在一些耗时的计算，每次重新渲染对页面性能显然是糟糕的，这时 React.memo()
对你来说也许是一个好的选择。并不是所有的组件都要引入 React.memo()，自身浅对比这个过程也会有一些消耗，如果没有特殊需求，也不一定非要使用。
React.memo仅检查props变更