reactjs - useRef 来存储之前的状态值

Question

我对下面使用 useRef 存储以前的状态值感到困惑。本质上，它如何能够正确显示先前的值。由于 useEffect 依赖于“value”，我的理解是每次“value”更改时(即当用户更新文本框时)，它会将“prevValue.current”更新为新输入的值。
但这似乎不是正在发生的事情。在这种情况下，步骤的顺序是什么？

function App() {
  const [value, setValue] =  useState("");
  const prevValue = useRef('')
  useEffect(() => {
    prevValue.current = value;
  }, [value]);
  return (
    <div>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <div>
        Curr Value: {value}
      </div>
      <div>
        Prev Value: {prevValue.current}
      </div>
    </div>
  );
}

Answer 1

好的，虽然这在技术上可行，但这是一种令人困惑的方法，并且可能会在您添加更多内容时导致错误。它起作用的原因是因为 useEffect运行 后 state 更改，并且更改 ref 值不会导致重新渲染。更好的方法是在 onChange 期间更新 ref 值。处理程序，而不是在效果中。但是您发布的代码的工作方式如下:

最初，两者都是空的

用户输入内容，通过 setValue 触发状态更改

这会触发重新渲染，因此 {value}是新值，但由于 ref 尚未更新，{prevValue.current}仍然呈现为 旧 值(value)

接下来，在渲染之后，效果运行，因为它有 value作为依赖。所以这个效果更新了 ref 以包含 当前 状态值

但是，由于更改 ref 值不会触发重新渲染，因此新值不会反射(reflect)在渲染的内容中

因此，一旦上述步骤完成，那么从技术上讲，状态值和 ref 是相同的值。但是，由于 ref 更改不会触发重新渲染，因此它仍会在渲染的内容中显示旧的 ref 值。
这显然不是很好，因为如果其他东西触发了重新渲染，比如你有另一个具有连接状态值的输入，那么是 {prevValue.current}然后将重新渲染为当前 {value}然后在技术上是错误的，因为它会显示当前值，而不是以前的值。
因此，虽然它在这个用例中从技术上讲是可行的，但随着您添加更多代码，它很容易出现错误，并且令人困惑