时间戳

首页 > 解决方案 > 当 useRef 用作实例变量时，useCallback 和 useRef 钩子之间的区别

reactjs - 当 useRef 用作实例变量时，useCallback 和 useRef 钩子之间的区别

问题描述

我正在阅读 React 中的钩子，但我在理解 useRef 和 useCallback 钩子之间的区别时遇到了一些麻烦。

具体来说，我希望了解如何使用这两个来避免不必要的子组件重新渲染。

根据我对堆栈溢出这个答案的理解，以下函数可以写成：

  const Avatar = function({ history, url, fullName }) {
  const onMenuItemClick = urlToNavigate => history.push(urlToNavigate),
    onMenuItemClickRef = useRef(onMenuItemClick);

  return (
    <Menu
      label={<RoundedImage src={url} alt={fullName} />}
      items={[
        { label: `Logged in as: ${fullName}` },
        {
          label: "Liked articles",
          onClick: () => onMenuItemClickRef.current("/liked-articles")
        },
        {
          label: "Edit profile",
          onClick: () => onMenuItemClickRef.current("/profile")
        },
        { label: "Logout", onClick: () => console.log("Logging out") }
      ]}
    />
  );
};

替换是否也有意义：

const onMenuItemClick = urlToNavigate => history.push(urlToNavigate)

和：

const onMenuItemClick = useCallBack(urlToNavigate => history.push(urlToNavigate), [urlToNavigate])

所以只有当 urlToNavigate 改变时它才会改变？

标签： reactjsreact-hooks

解决方案

在您在问题中引用的链接中，关键是子组件（接收回调的组件）是 memoized。

在正常的 Parent > Children 循环中，每次 Parent 的 prop 发生变化时，它都会重新渲染，Child 也会重新渲染，即使 Child 的 prop 没有改变。

如果我们想避免 Children 在其 prop 未更改时渲染，那么我们可以记忆组件（React.memo）。一旦我们这样做了，如果在 Parent 中我们在每次渲染时创建一个函数回调，我们可能会遇到问题，因为 memoized Children 将解释为一个新函数，因此将再次渲染。

为了避免这种情况，我们可以useCallback在 Parent 中使用，所以当孩子收到回调时，它知道它是否是新的并且应该渲染。

当孩子没有被记忆时使用useCallback没有帮助，因为如果父母渲染，孩子无论如何都会渲染。

关于useRef函数的使用，我不完全确定，但我会说它可能类似于使用useCallback带有空数组的 a 作为依赖项。

推荐阅读