时间戳

首页 > 解决方案 > 使用 React 的 useCallback 挂钩代替 useEffect 的目的是什么？

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

问题描述

我试图了解使用 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？而且，我在这里错过了什么？

标签： javascriptreactjsreact-hooks

解决方案

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 文档更详细的用例 foruseCallback和其他钩子。

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

推荐阅读