React中为何useEffect控制台ref值与赋值一致，UI显示却不同？

问题 #

在React组件中，我用useState维护inputValue，用useRef创建previousInputValue跟踪历史值，遇到两个问题：

1. 依赖inputValue的useEffect里，我以为首次打印的inputValue是新值（比如"ab"），previousInputValue.current是旧值（比如"a"），但控制台实际都显示"ab"；
2. useEffect末尾已经把inputValue赋值给previousInputValue.current，但UI中第二个<h2>仍显示旧值，而非和inputValue一致。

代码示例：

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    console.log(inputValue, previousInputValue.current); // 实际输出ab ab，预期是ab a
    previousInputValue.current = inputValue;
    console.log("--", inputValue, previousInputValue.current); // 输出ab ab 
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>  {/* 显示ab */}
      <h2>Previous Value: {previousInputValue.current}</h2> {/* 显示a，预期是ab */}
    </>
  );
}

解答 #

1. 为什么useEffect里首次打印的两个值一致？ #

你大概率是混淆了操作步骤或日志对应的渲染周期。正常流程下，当你从"a"输入到"ab"时：

• 第一次输入"a"：组件渲染，inputValue变为"a"，渲染完成后useEffect执行，把previousInputValue.current设为"a"；
• 输入"b"触发setInputValue("ab")：React先更新inputValue为"ab"，然后组件重新渲染，此时previousInputValue.current还是"a"，渲染完成后useEffect执行，首次打印应该是ab a，而非ab ab。

如果你的控制台显示两者都是"ab"，要么是你看错了不同渲染周期的日志，要么是连续快速输入导致状态更新被合并（比如一次性粘贴"ab"，此时inputValue从""直接变为"ab"，previousInputValue.current还是初始的""，打印结果会是ab ""）。

2. 为什么UI里的Previous Value显示旧值？ #

核心原因是：useRef的current属性变化不会触发组件重新渲染。具体流程：

1. 输入"b"后，setInputValue("ab")触发组件重新渲染，此时UI中读取的previousInputValue.current还是上一次的"a"；
2. 渲染完成后useEffect执行，把previousInputValue.current设为"ab"——但这个修改不会触发新的渲染，所以UI不会更新，仍然显示之前的旧值。

正确跟踪历史值的写法 #

如果要让UI正确显示上一次的输入值，不需要用useEffect，直接在渲染阶段更新useRef即可：

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  // 渲染阶段先获取上一次的值，再更新ref保存当前值
  const prevValue = previousInputValue.current;
  previousInputValue.current = inputValue;

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {prevValue}</h2>
    </>
  );
}

这样每次渲染时，prevValue会拿到上一次的inputValue，然后把当前值存入useRef，UI就能实时显示历史值。

内容的提问来源于stack exchange，提问作者ASHUTOSH MAJHI