memo

组件缓存

作用：

当组件接受props没有变化时，跳过组件的re-render。

对比props是否有变化是一种浅对比，底层用的Object.is()

• Object.is(3, 3) : true

• Object.is({}, {}) : false

• Object.is([], []) : false

• Object.is(() => {}, () => {}) : false

示例：

import { memo } from "react";

const List = memo(function ({ items }) {
  console.log("rendering children");

  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
});

export default List

每次操作复选框都会出发子组件的重新渲染，一定要配合父组件中对props进行useMemo()包裹使用才有效。

应该给每个组件都包裹一层memo吗？

官方原文：

If there is no perceptible lag when your component re-renders, memo is unnecessary.Keep in mind that memo is completely useless if the props passed to your component are always different, such as if you pass an object or a plain function defined during rendering. This is why you will often need useMemo and useCallback together with memo.

没必要。

• 捆绑优化：memo必须配合useMemo和useCallback一起使用才有效，这样就要求虽有props都要做额外的处理

• 代码质量：处处都是用memo可能让组件的难以debug，以及可读性降低