问题描述
假设我们有这样的组件
const Example = () => {
const [counter,setCounter] = useState(0);
const increment = () => setCounter(counter => counter + 1);
return (
<div>
<Button onClick={increment} />
<div>{counter}</div>
</div>
);
}
当我通过onClick处理程序作为箭头功能时，我的eslint发出了警告：
error JSX props should not use arrow functions react/jsx-no-bind
简短的答案是因为每次都会重新创建箭头功能，这会损害性能。 本文中提出的一种解决方案是将 useCallback 挂钩包装为空数组。而当我更改为此选项时，护送警告确实消失了。
const Example = () => {
const [counter,setCounter] = useState(0);
const increment = useCallback(() => setCounter(counter => counter + 1),[]);
return (
<div>
<Button onClick={increment} />
<div>{counter}</div>
</div>
);
}
但是，还有一种意见认为，由于useCallback的开销，过度使用 useCallback最终会降低性能。一个示例在这里：https://kentcdodds.com/blog/usememo-and-usecallback
这让我真的很困惑吗？因此，对于Functional Components，在处理内联函数处理程序时，我应该只编写arrow函数（忽略eslint）还是始终将其包装在useCallback中？
解决方法
简短的答案是因为每次都会重新创建箭头功能，这会损害性能。
这是一个常见的误解。每次任一种方式都会重新创建箭头功能（尽管对于const useStyles = makeStyles({
root: {
width: 600
}
});
，随后的功能可能会立即被丢弃）。 useCallback的作用是使使用回调的子组件在被记住的情况下不会重新呈现。
首先让我们看一下误解。考虑useCallback呼叫：
useCallback这样执行：
-
计算第一个参数
const increment = useCallback(() => setCounter(counter => counter + 1),[]);，创建函数 -
计算第二个参数
() => setCounter(counter => counter + 1)，创建一个数组 -
使用这两个参数调用
[]，返回一个函数
与不使用useCallback的情况进行比较：
useCallback这要简单得多：创建函数。这样就不必执行上面的＃2和＃3了。
让我们继续进行const increment = () => setCounter(counter => counter + 1);
的实际操作，这很有用。让我们看看使用回调的地方：
useCallback现在，假设<Button onClick={increment} />
是用React.memo或类似名称来记忆的。如果Button每次渲染组件时都发生更改，则increment每次更改组件时都必须重新渲染；它不能在渲染之间重复使用。但是，如果Button在渲染之间是稳定的（因为您将increment与一个空数组一起使用），则可以重用调用useCallback的备注结果，而不必再次调用它。
这是一个例子：
Buttonconst { useState,useCallback } = React;
const Button = React.memo(function Button({onClick,children}) {
console.log("Button called");
return <button onClick={onClick}>{children}</button>;
});
function ComponentA() {
console.log("ComponentA called");
const [count,setCount] = useState(0);
// Note: Safe to use the closed-over `count` here if `count `updates are
// triggered by clicks or similar events that definitely render,since
// the `count` that `increment` closes over won't be stale.
const increment = () => setCount(count + 1);
return (
<div>
{count}
<Button onClick={increment}>+</Button>
</div>
);
}
function ComponentB() {
console.log("ComponentB called");
const [count,setCount] = useState(0);
// Note: Can't use `count` in `increment`,need the callback form because
// the `count` the first `increment` closes over *will* be slate after
// the next render
const increment = useCallback(
() => setCount(count => count + 1),[]
);
return (
<div>
{count}
<Button onClick={increment}>+</Button>
</div>
);
}
ReactDOM.render(
<div>
A:
<ComponentA />
B:
<ComponentB />
</div>,document.getElementById("root")
);
请注意，点击<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>中的按钮总是会再次调用ComponentA，但是不会点击Button中的按钮。
您什么时候想这样做？这在很大程度上取决于您，但是当组件的状态以不影响ComponentB的内容而不会影响increment 和如果Button在呈现时必须做大量工作。 Button可能不会，但其他子组件则可能。
例如，如果您将Button用作按钮的文本，则在上一示例中，useCallback可能毫无意义，因为这意味着count必须重新渲染，无论： / p>
Buttonconst { useState,since
// the `count` that `increment` closes over won't be stale.
const increment = () => setCount(count + 1);
return (
<div>
<Button onClick={increment}>{count}</Button>
</div>
);
}
function ComponentB() {
console.log("ComponentB called");
const [count,[]
);
return (
<div>
<Button onClick={increment}>{count}</Button>
</div>
);
}
ReactDOM.render(
<div>
A:
<ComponentA />
B:
<ComponentB />
</div>,document.getElementById("root")
);
还要注意，<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>不是免费的，它会影响回调中的代码。在示例中，查看useCallback和ComponentA中的回调中的代码。 ComponentB（不使用ComponentA）可以使用封闭的useCallback值（在限制之内！），count。但是() => setCount(count + 1)中的那个总是必须使用setter的回调形式ComponentB。这是因为如果继续使用创建的第一个() => setCount(count => count + 1)，则关闭的increment将会过时-您会看到计数增加到1，但再也没有增加了。
在我看来，useCallback 不是为了性能。我想不出任何原因来定义一个函数真的很昂贵。
与 useMemo 不同，useCallback 只是记住函数，并没有实际执行它。
那么我们什么时候应该使用它？
主要原因是为了防止不必要地重新运行一个函数。重新定义一个函数没有问题，但在每次状态更新时重新运行它是有问题的，而且通常很危险。
TL DR;仅当函数需要位于 useCallback
的依赖数组内时才使用 useEffect
我现在能想到两种情况：
- 例如，一个函数是异步的，我们需要在任何依赖项发生变化时运行它：
const [data,setData] = useState([]);
const [filter,setFilter] = useState({});
const fetchData = useCallback(async () => {
const response = await fetchApi(filter);
setData(response.data);
},[filter]);
useEffect(() => {
fetchData();
},[fetchData]);
（如果函数不是异步的，我们可以直接使用useEffect而不使用useCallback）
但是，当它仅通过用户交互运行时，不需要用 useCallback 包装它：
const [data,setFilter] = useState({});
const fetchData = async () => {
const response = await fetchApi(filter);
setData(response.data);
};
return (
<button onClick={fetchData}>Fetch Data</button>
);
- 何时应该将函数 prop 传递给第 3 方组件：
const onAwesomeLibarayLoaded = useCallback(() => {
doSomething(state1,state2);
},[state1,state2]);
<AwesomeLibrary
onLoad={onAwesomeLibarayLoaded}
/>
因为 AwesomeLibrary 组件可能会使用传递的 onLoad 函数执行类似于示例 1 的操作：
const AwesomeLibarary = ({onLoad}) => {
useEffect(() => {
// do something
onLoad();
},[onLoad]);
};
如果您确定它不在 useEffect 内，那么即使您不使用 useCallback 也可以。