React 优化 Hooks

useMemo 和 useCallback

在 React 中，当一个父组件的状态或 Props 发生变化时，他会默认重新渲染其所有的子组件，即使传递给某些子组件的 Props 并未发生任何改变。为了避免这种浪费，我们可以使用 React.memo 来包裹子组件，使其只有在 Props 真正发生变化时才重新渲染。

这听起来很好，但会存在问题，如果父组件传给子组件的 Props 是一个对象，数组或者函数，那么在每次父组件渲染时，他们都会被重新创建，导致引用地址发生变化。从 React.memo 的角度来说，就等同于 Props 发生变化，从而导致优化失败。

为了解决这个问题。我们引入了 useMemo 来缓存对象或复杂计算结果，用 useCallback 来缓存函数实例。

实例

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const user = useMemo(
    () => ({
      name: "Alice",
      count: count,
    }),
    [count]
  );

  const handleClick = useCallBack(() => {
    console.log(count);
  });

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <MemoizedChild user={user} onClick={handleClick}></MemoizedChild>
    </div>
  );
};

存在的痛点

1. 代码污染和心智负担：过度使用 useMemo 和 useCallback 会导致代码变得冗长和复杂，增加了理解和维护的难度。需要时刻考虑这里是否需要缓存
2. 依赖项数组的陷阱：管理以来数组是极其繁琐且容易出错的。忘记添加依赖项会导致陈旧闭包的 bug，添加了不必要的依赖项则可能导致缓存频繁失效，失去优化的意义。
3. 偏离声明式的初心