javascript 使用 React 的 useCallback 钩子代替 useEffect 的意图是什么？

What is the intention of using React's useCallback hook in place of useEffect?

提问by Don Brody

I'm trying to understand what the use case is for using React's useCallbackhook in place of the useEffecthook.

我试图了解使用 React 的useCallback钩子代替钩子的用例是什么useEffect。

They both appear to act as a listener for state changes of their inputs (examples taken from the React Docs):

它们似乎都充当其输入状态更改的侦听器（来自React Docs 的示例）：

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

But, the useEffecthook gives the additional benefit of cleaning up resources where you would have previously with componentWillUnmount.

但是，useEffect钩子提供了额外的好处，即清理您以前使用componentWillUnmount.

So, what is a good use case for using useCallback? And, what am I missing here?

那么，什么是 using 的好用例useCallback？而且，我在这里错过了什么？

回答by Ryan Cogswell

useEffecthas very specific timing aspects related to it that you can read about here. The function specified will be executed after rendering is complete and the DOM has been updated. This will happen after each rendering where any of the values specified in the second-argument array change.

useEffect有与之相关的非常具体的计时方面，您可以在此处阅读。指定的函数将在渲染完成且 DOM 已更新后执行。这将在每次渲染后发生，其中第二个参数数组中指定的任何值发生更改。

useCallbackdoesn't automatically execute anything. It returns a function that can be executed by whatever code needs to trigger it. There is no listening to changes that causes an execution of the callback. The array values just control what instance of the function is returned. The array values do not control the timing of the function execution.

useCallback不会自动执行任何东西。它返回一个函数，任何需要触发它的代码都可以执行该函数。没有侦听导致执行回调的更改。数组值仅控制返回的函数实例。数组值不控制函数执行的时间。

A key use case is to pass this function as a prop to a child component to use as an event handler. useCallbackallows you to define an inline function to use as an event handler (thus it has access to any other variables in the context where the function is defined) without the downside of passing a unique prop to the child every render. So long as the values in the second-argument array have not changed, the same function will be returned as was returned the previous rendering. So if the child component is a pure component, it will not be forced to re-render simply because of always receiving a unique event handler function.

一个关键用例是将此函数作为道具传递给子组件以用作事件处理程序。useCallback允许您定义一个内联函数以用作事件处理程序（因此它可以访问定义函数的上下文中的任何其他变量），而没有在每次渲染时将唯一的 prop 传递给子级的缺点。只要第二个参数数组中的值没有改变，就会返回与前一次渲染相同的函数。所以如果子组件是纯组件，就不会因为总是接收唯一的事件处理函数而被迫重新渲染。

without useCallback

没有 useCallback

const Parent = ()=> {
   const [a, setA] = useState(null);
   const eventHandler = ()=> {
      // every render creates a unique instance of eventHandler
      // even though it always does the same thing so long as 'a' hasn't changed
      doSomethingWithA(a);
   }
   return <Child onClick={eventHandler}/>
}

with useCallback

和 useCallback

const Parent = ()=> {
   const [a, setA] = useState(null);
   const eventHandler = useCallback(()=> {
      // A unique function instance is passed in to useCallback on every render, but
      // eventHandler will be set to the first instance of this function
      // (i.e. potentially an instance of the function that was passed to useCallback
      // on a previous rendering) that was passed to useCallback
      // for the current value of 'a'.
      doSomethingWithA(a);
   }, [a]);
   return <Child onClick={eventHandler}/>
}

This articleprovides a bit more detail than the React docs on the use case for useCallbackand other hooks.

这篇文章提供了比 React 文档更多的关于 foruseCallback和其他钩子用例的细节。

Related answer: Trouble with simple example of React Hooks useCallback

相关答案：React Hooks useCallback 的简单示例有问题