React.memo

React.memo为高阶组件，主要作为性能优化的方式存在

该方法接收两个参数，第二个参数可选，如： React.memo(MyComponent, areEqual)

当areEqual的返回值为true时，不会触发重新渲染，返回false的时候，会触发重新渲染，和shouldComponentUpdate的返回值正好相反

默认情况下，被React.memo包裹的组件，只会进行浅比较，如果我们需要自定义比较方式，此时就需要使用areEqual方法进行比较判定

如果我们的组件中，存在useState、useReducer或者useContext的hook，当state或context发生变化时，即使它被React.memo包裹，它仍会重新渲染

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

标签：返回,渲染,memo,React,MyComponent,areEqual
来源： https://www.cnblogs.com/xiaoxiaopao/p/16455296.html