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

Question

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

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

根据我对 stack overflow 上的这个答案的理解，以下函数可以写为：

  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 改变时改变？

Answer 1

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

在正常的“父级”>“子级”循环中，每次父级的道具发生更改时，即使子级的道具没有更改，它也会重新渲染，子级也会重新渲染。

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

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

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

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