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

Question

我正在尝试了解使用 React 的 useCallback hook in place of the 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 具有与之相关的非常具体的时间方面，您可以阅读 here。指定的函数将在渲染完成并且 DOM 已更新后执行。这将在每次渲染后发生，其中第二个参数数组中指定的任何值都会发生变化。

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

一个关键用例是将此函数作为道具传递给子组件以用作事件处理程序。 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 和其他钩子用例的详细信息。

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

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

javascript

reactjs

react-hooks