React 之解决页面多次重复渲染造成页面卡顿问题

一、场景案例

描述：画面上存在多个卡片（卡片是动态渲染的），每个卡片有自己的相关操作，比如，点击卡片的菜单项，出现弹框，弹框中需要填入相关的信息，在输入信息的过程中会出现一个字一个字出来的卡顿效果，或者是点击卡片菜单项，弹框出现的时候比较卡顿等

二、解决方案–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变更

React 之 解决页面多次重复渲染造成页面卡顿问题