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

Question

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

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

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

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

但是，该useEffect钩子还具有清理资源的额外好处，而您以前可能会使用componentWillUnmount。

那么，有什么好的用例useCallback呢？而且，我在这里想念什么？

Answer 1

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

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

一个关键的用例是将此功能作为道具传递给子组件以用作事件处理程序。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}/>
}

与React文档相比，本文提供了有关用例useCallback和其他挂钩的详细信息。