391 - 《React Memo》

汇总下关于 memo 相关的知识点。

1、React.memo 是一个非常有用的工具。它允许我们对组件本身进行 memorize。如果组件的 re-render 是由其父组件触发，且这个组件被 React.memo 包裹时，那 React 会停下来检查它的 props。如果所有的 props 都没有变化，那么组件将不会被 re-render。

2、memo props 通常是个反模式。比如下面场景的 useCallback 没有必要，因为 Component re-render 时，其子组件肯定会 re-render，加不加 onClick 的 useCallback 其实没有意义。

function Component() {
  const onClick = useCallback(() => {}, []);
  return <button onClick={onClick} />;
}

3、需要 memo props 通常有两个场景。1）这个 props 被当做 useEffect、useMemo、useCallback 等 hook 的依赖时，被用作下游组件中 hook 依赖也算。

function Parent() {
  // 应该要 memo
  const fetch = () => {};
  return <Child onMount={fetch} />
}

function Child({ onMount }) {
  useEffect(() => {
    onMount();
  }, [onMount]);
}

2）当组件被 React.memo 包裹时。比如下方的 data 和 onChange，通过 useMemo 和 useCallback 可以保持引用稳定，从而避免 ChildMemo 的 re-render。

const Child = ({ data, onChange }) => {};
const ChildMemo