javascript - 使用 React 的 useCallback hook 代替 useEffect 的目的是什么？

Question

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

它们似乎都充当输入状态变化的监听器(示例取自 React Docs ):

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

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

但是，useEffect Hook 提供了额外的好处，可以清理您之前使用 componentWillUnmount 进行的资源。

那么，使用 useCallback 的良好用例是什么？而且，我在这里缺少什么？

Answer 1

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

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

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

没有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}/>
}

与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 article比 React 文档更详细地介绍了 useCallback 和其他钩子(Hook)的用例。

相关答案:Trouble with simple example of React Hooks useCallback