前言
刚开始使用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
