memo

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现

由于React的更新机制是当组件的state更新时，当前组件以及子组件都会重新渲染，即使这些子组件的props没有更新也会渲染。React.memo 的作用就是包装子组件，这样只有当依赖的props更新的时候才会去重新渲染子组件

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

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

注意点：

• React.memo与 React.PureComponent 非常相似，但只适用于函数组件，而不适用 class 组件

• 如果 props 包含 useState 或 useContext 的 Hook, 当 context 发生变化时，它仍会重新渲染