不要过度使用React.useCallback()
来源：https://dmitripavlutin.com
作者：Dmitri Pavlutin
我博客的一位读者在Facebook上联系到我，提出了一个有趣的问题。他说，他的队友不管在什么情况下，都会把每一个回调函数封装在 useCallback() 里面。
import React, { useCallback } from 'react';
function MyComponent() {
const handleClick = useCallback(() => {
// handle the click event
}, []);
return <MyChild onClick={handleClick} />;
}
“每个回调函数都应该被记住，以防止使用回调函数的子组件被无用地重新渲染”，这是他的队友的理由。
这句话与事实相去甚远。此外，useCallback() 的这种用法会使组件变慢，从而损害性能。
在本文中，我将解释如何正确使用 useCallback()。
1.了解函数相等性检查
在深入研究 useCallback() 用法之前，让我们区分一下钩子要解决的问题：函数相等性检查。
让我们定义一个名为 factory() 的函数，该函数返回函数：
function factory() {
return (a, b) => a + b;
}
const sum1 = factory();
const sum2 = factory();
sum1(1, 2); // => 3
sum2(1, 2); // => 3
sum1 === sum2; // => false
sum1 === sum1; // => true
sum1 和 sum2 是将两个数字相加的函数，它们是由 factory() 函数创建的。
函数 sum1 和 sum2 共享相同的代码源，但是它们是不同的对象，比较它们 sum1 === sum2 结果为 false。
这就是JavaScript的工作方式，对象（包括函数对象）仅等于其自身。
2.useCallback() 的目的
共享相同代码的不同函数实例往往在React组件内部创建。
当 React 组件主体创建一个函数（例如回调或事件处理程序）时，这个函数会在每次渲染时重新创建。
import React from 'react';
function MyComponent() {
// handleClick在每次渲染时重新创建
const handleClick = () => {
console.log('Clicked!');
};
// ...
}
handleClick 在 MyComponent 的每次渲染中都是一个不同的函数对象。
因为内联函数很“便宜”，所以在每次渲染时重新创建函数不是问题，每个组件有几个内联函数是可以接受的。
然而，在某些情况下，你需要保留一个函数的一个实例:
包装在 React.memo()（或shouldComponentUpdate）中的组件接受回调prop。当函数用作其他hooks的依赖项时 useEffect(...，[callback])
这就是当 useCallback(callbackFun, deps) 帮助你的情况：给出相同的依赖值 deps，hook在两次渲染之间返回相同的函数实例。
import React, { useCallback } from 'react';
function MyComponent() {
// handleClick是同一个函数对象
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
// ...
}
handleClick 变量将在不同的 MyComponent 的渲染之间始终拥有相同的回调函数对象。
3.一个好用例
想象一下，你有一个呈现大的项目列表组件：
import React from 'react';
function MyBigList({ items, handleClick }) {
const map = (item, index) => (
<div onClick={() => handleClick(index)}>{item}</div>;
);
return <div>{items.map(map)}</div>;
}
export const MyBigList = React.memo(MyBigList);
MyBigList 渲染了一个项目列表，要知道这个列表可能很大，可能有几百个项目。要保留重新渲染的列表，可以将其封装到 React.memo 中。
单击一个项目时，MyBigList 的父组件需要提供项目列表和处理程序功能。
import React from 'react';
import useSearch from './fetch-items';
function MyParent({ term }) {
const handleClick = useCallback((item) => {
console.log('You clicked ', item);
}, [term]);
const items = useSearch(term);
return (
<MyBigList
items={items}
handleClick={handleClick}
/>
);
}
handleClick 回调由 useCallback() 记忆。只要 term 变量保持不变，useCallback() 就会返回相同的函数对象。
即使由于某些原因重新启用了 MyParent 组件，handleClick 仍保持不变，并且不会破坏 MyBigList的记忆。
4.一个“坏”的用例
让我们回顾一下本文简介中的示例：
import React, { useCallback } from 'react';
function MyComponent() {
const handleClick = useCallback(() => {
// handle the click event
}, []);
return <MyChild onClick={handleClick} />;
}
function MyChild ({ onClick }) {
return <button onClick={onClick}>I am a child</button>;
}
记住 handleClick 是否有意义？
没有，因为调用 useCallback() 需要很多工作，每次渲染 MyComponent 时，都会调用 useCallback() Hook。
从内部来讲，React确保返回相同的对象函数。即便如此，内联函数仍然在每次渲染时创建，useCallback() 只是跳过了它。
即使用 useCallback() 返回相同的函数实例，也不会带来任何好处，因为优化要比没有优化花费更多。
不要忘记增加的代码复杂性，你必须确保 useCallback() 的 deps 与您在 memoized 回调中使用的 deps 保持同步。
只需接受每次重新渲染时创建新的函数：
import React, { useCallback } from 'react';
function MyComponent() {
const handleClick = () => {
// handle the click event
};
return <MyChild onClick={handleClick} />;
}
function MyChild ({ onClick }) {
return <button onClick={onClick}>I am a child</button>;
}
5.总结
任何优化都会增加复杂性，任何过早添加的优化都会带来风险，因为优化后的代码可能会多次更改。