reactjs - useRef 用作实例变量时 useCallback 和 useRef 钩子(Hook)之间的区别

Question

我正在阅读有关 React 中的钩子(Hook)的内容，但我在理解 useRef 和 useCallback 钩子(Hook)之间的区别时遇到了一些困难。

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

根据我对this answer on 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

在您的问题中引用的链接中，关键是子组件(接收回调的组件)已被内存。

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

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

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

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

<小时/>

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