为什么 useRef 值在它是整数时会动态更新，但在它是字符串时会存储先前的值？

Question

我刚刚学习了 useRef 并且对它的实际工作原理感到困惑。例如， #1

function Ref() {
  const rerenderCount = useRef(0);

  useEffect(() => {
    rerenderCount.current = rerenderCount.current + 1;
  });

  return <div>{rerenderCount.current}</div>;
}

这里，useRef 给出的输出与下面代码中的 useState 相同，#2

function State() {
  const [rerenderCount, setRerenderCount] = useState(0);

  useEffect(() => {
    setRerenderCount(prevCount => prevCount + 1);
  });

  return <div>{rerenderCount}</div>;
}

但是在这个#3 代码中，previousName.current 值总是显示前一个值。但它被设置为名称。

const [name, setName] = useState("");
  const previousName = useRef(null);

  useEffect(() => {
    previousName.current = name;
  }, [name]);

  return (
    <div className="App">
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <div>
        My name is {name} and it used to be {previousName.current}
      </div>
    </div>
  );

请有人解释为什么这个名字在整数按时更新的地方倒退了一步。另外，useEffect 中 [name] 的用途是什么。无论有没有它，我都会得到相同的结果和渲染计数。

Answer 1

在您的示例中，previousName 落后了一步，因为当您更改 name 状态时，组件将重新渲染，调用 useEffect 并更新 previousName，但最后的更改不会导致新的渲染（ useRef 与 useState 不同，组件不会重新渲染），因此您会看到 name 正确更新，但 previousName 的值与以前相同，即使其值已更改。 这是因为previousName的变化是在后续渲染过程中由于状态的变化而发生的。 要看到它的变化，需要额外的渲染。 为避免这种行为，您可以使用事件处理程序而不是依赖 useEffect 挂钩。

const handleChange = (text: string) => {
    setName(text);
    previousName.current = text;
  };

  return (
    <div className="App">
      <input value={name} onChange={(e) => handleChange(e.target.value)} />
      <div>
        My name is {name} and it used to be {previousName.current}
      </div>
    </div>
  );