是否推荐大量使用useCallback和useMemo？

前言

刚开始使用react hooks，大量使用useCallback，认为是性能优化处理；后来发现有些场景使用useCallback反而造成性能问题。认真了解相关资料后，输出以下总结。

结论在前

官方文档不推荐大量使用。

理由：

react re-render的渲染性能很高，大部分时候足以包容大部分web项目出现的hooks重复渲染引起的性能消耗。主要因为re-render作用于vertual dom，而不是实际的dom，所以re-render的渲染性能很高。
相对于花费额外的开发成本关注细微的性能优化，更推荐减少订阅视图无关的数据，以避免重复渲染。
从react hooks设计上来说，本身就接受re-render是常态的事实，否则就应该把useCallback和useMemo放在架构里使用，而不是手动调用。大量使用useCallback和useMemo，反而违背了最小知识原则和接口隔离原则
useCallback的设计初衷并非解决组件内部函数多次创建的问题，而是减少子组件的不必要重复渲染

useCallback和useMemo

相同点

通过缓存函数（对象），减少re-render。仅依赖项发生变化时，才触发re-render

不同点

useCallback缓存函数
useMemo缓存对象

useCallback(fn, deps)
useMemo(() => fn, deps)

作用

在react hooks中，由于state更新或父组件更新等原因都容易引起的组件re-render，都会导致函数和对象的重复声明和计算。useCallback和useMemo通过缓存函数或对象，达成仅初始化或依赖项发生变化时，才会触发对应函数或对象的re-render的作用。

Re-render

在react class对应的生命周期shouldComponentUpdate可以检测到组件内部的部分更新；同样的react hooks中为了可以检测到状态的更新，引入了re-render。

对于函数组件的 re-render，大致分为以下三种情况：

组件本身使用 useState 或 useReducer 更新，引起的 re-render；
父组件更新引起的 re-render；
组件本身使用了 useContext，context 更新引起的 re-render。
三种情况场景

性能优化

常规使用

count每次更新时，都会导致Hello组件的渲染，对于Hello组件来说，这是无效的更新

const Hello = ({ name }) => {
  console.log("hello render");
  return<div>hello {name}</div>;
};
const App = () => {
  console.log("app render");
  const [count, addCount] = useState(0);
  return (
    <div className="app">
      <Hello name="react" />
      <div className="counter-num">{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};

优化方案

将更新部分抽离成单独组件

// Counter组件内部的渲染触发Hello进行无效的渲染
const App = () => {
  return (
    <div className="app">
      <Hello name="react" />
      <Counter />
    </div>
  );
};

将不需要 re-render 的部分抽离，以插槽形式渲染（children）

// App 组件预留 children 位， count数据更新不会触发children的更新
const App = ({ children }) => {
  const [count, addCount] = useState(0);
  return (
    <div className="app">
        {children}
      <div className="counter-num">{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};
// 使用
<App>
  <Hello name="react" />
</App>

React.memo
问题：Hello组件props没有更新，但由于父组件count的更新，触发re-render
解决办法：

// Hello组件memo化，count数据变化时，Hello 组件是不会re-render的。除非Hello组件的props更新。
const Hello = React.memo(({ name }) => {
  console.log("hello render");
  return<div>hello {name}</div>;
});

useCallback
问题：count变化，引起clickHandler重新计算；onClick更新，又引起Hello组件更新

// 新增 onClick 处理函数
const Hello = React.memo(({ name, onClick }) => {
  console.log("hello render");
  return<div onClick={onClick}>hello {name}</div>;
});

const App = ({ children }) => {
  console.log("counter render");
  const [count, addCount] = useState(0);
  
  // 新增处理函数
  const clickHandler = () => {
    console.log("hello click");
  };

  return (
    <div className="counter">
      <Hello name="react" onClick={clickHandler} />
      <div className="counter-num">{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};

解决办法：

// 新增处理函数，使用 useCallback 缓存起来
const clickHandler = useCallback(() => {
 console.log("hello click");
}, []);

例外：useCallback无效场景

// 新增处理函数，使用 useCallback 缓存起来
// 在 callback 函数中使用 count
// 并将 count 添加进依赖
// 只要 count 更新，callback 函数又将更新，useCallback 就没什么用了
const clickHandler = useCallback(() => {
 console.log("count: ", count);
}, [count]);

useCallback/useMemo 的使用误区
产生误区的原因是useCallback的设计初衷并非解决组件内部函数多次创建的问题，而是减少子组件的不必要重复渲染

总结

1.不推荐大量使用useCallback和useMemo，更推荐通过不订阅视图无关的数据、细化组件粒度（将更新部分抽离成单独组件、将不需要 re-render 的部分抽离，以插槽形式渲染），减少re-render影响范围。
2.useCallback返回作为props的函数，需要搭配memo使用。

参考文献

https://mp.weixin.qq.com/s/S9DNxUxtlbwRrwC_YEc26w
https://www.zhihu.com/question/390974405

是否推荐大量使用useCallback和useMemo？