与使用反应钩子的先前状态实现相关的问题答案

【问题标题】：Question related to previous state implementation using react hooks与使用反应钩子的先前状态实现相关的问题
【发布时间】：2021-07-23 04:29:39
【问题描述】：

这是 react 网站建议实现的方式：

https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

我的问题是，我们可以使用 useState 代替 useRef 吗？

如果是，它与 useRef 实现有什么不同吗？

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Now: {count}, before: {prevCount}</h1>;
}

function usePrevious(value) {
  // can we use "useState" instead of "useRef" here?
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

【问题讨论】：

不可以使用 useState ，如果组件重新挂载那么它将丢失之前的值，因此您需要将其存储在 useRef 中，即使组件重新挂载也会保存该值
当然，您可以改用useState 挂钩，它只会触发不必要的重新渲染，而且可能不是您想要的。
@DrewReese，你能解释一下为什么 useState 会触发更多的重新渲染吗？
它是 React 组件渲染的很大一部分，即组件在 state 或 props 更新时重新渲染。我指的是每个渲染周期，当您“缓存”当前值（成为下一次渲染的前一个值）时，您会更新一个状态，这将触发一个额外的渲染周期 before 当所有状态都“同步”时，您将进入“真正的”下一个渲染周期。这就是为什么首选使用 React ref 的原因，它不会触发重新渲染，因为它只是任何值的可变 bin。

标签： javascript reactjs

【解决方案1】：

你可以，例如

function Counter() {
  const [count, setCount] = useState(0);
  const [prevCount, setPrevCount] = useState();
  const setCountAndPrev = (newCount) => {
    setCount(newCount);
    setPrevCount(count);
  };

然后继续使用setCountAndPrev（如果需要，可以将整个内容提取到另一个钩子中）——但这有点令人费解。

如果没有同时设置两个状态，则可能效率低下，因为状态设置会导致重新渲染，在不必要时应避免这种情况。这通常不是问题，但可能会被认为更优雅。

【讨论】：