具有引用依赖关系的 useMemo 和 useEffect 之间的区别

Question

在 React 中，

useEffect

和

useMemo

都有一个依赖项参数。

我天真地认为它们的工作方式相同：每当依赖项参数中的值发生变化时，我认为

useEffect

或

useMemo

回调将会运行，唯一的区别只是时间（

useMemo

在渲染之前运行） ，而

useEffect

紧随其后）。

一般来说，它们是相同的。 但是当我有一个 ref 作为依赖项时，它们就不是：

const Foo = ()=> {
  const ref = useRef();
  useEffect(() => console.log('effect ref', ref), [ref]);
  useMemo(() => console.log('memo ref', ref), [ref]);
  return <div ref={ref}>Foo</div>
}

沙箱链接（点击右上角控制台图标即可查看日志）

据我了解，

Foo

应该渲染两次。 第一次通过时，

ref.current

将为

undefined

，第二次将设置为

<div>

。 因此，我希望看到

useEffect

的两个

effect ref div

日志，因为

ref

将在渲染 #1 和渲染 #2 之后设置。 我确实...

效果参考{当前：div}

效果参考{当前：div}

但是，在备忘录日志中，我从未看到记录的

div

。相反，我只是看到同样的事情重复出现：

备忘录参考未定义

备忘录参考未定义

这是第一次调用所期望的，因为组件尚未渲染......但是在第二次渲染之前，第一次渲染之后，不应该将

ref

设置为

<div>

，所以不应该

 useMemo

记录它吗？ 相反，似乎

useMemo

从未运行过。

简而言之，虽然我主要了解

useMemo

的工作原理，但似乎我缺少一些关键细节，这些细节解释了为什么它永远不会记录

ref

的值，并且我将不胜感激任何解释原因的帮助。

附注我意识到我可以通过使

useRef

依赖于状态变量，然后制作一个

useEffect

来解决所有这些问题，当

ref

发生变化时更新该状态变量......但我更专注于尝试理解先解决问题，然后再解决。

Answer 1

使用效果将根据更改后的引用触发一个操作，其中备忘录将是一个变量，并且您将需要返回一些内容。

例如：

const Foo = ()=> {
  const user = authHook(); // whatever here

  useEffect(() => console.log('user full name', `${user.firstname} ${user.lastname}` ), [user]); // will trigger when the user changes and outputs to console the user fill name

  const fullname = useMemo(() => `${user.firstname} ${user.lastname}`, [user]); // returns a variable that can be used in your code and will auto update when the user changes but wont reivaluate when anything else changes

  return <div>{fullname}</div>
}