具有相同原始值的 React 钩子调用 setState 仍然会导致重新渲染

Question

我发现当我定义一个值为“1”的 state 时，

并在每次单击按钮时将 state 的值设置为“2”，

前两次将导致重新渲染

重现演示： https://codesandbox.io/s/sweet-brattain-ys11d

代码：使用没有严格模式的 react@17

import { useState } from "react";

export default function App() {
  const [a, setA] = useState("1");
  console.log("render", a);
  return (
    <button
      onClick={() => {
        setA("2");
      }}
    >
      {a}
    </button>
  );
}

// log:
// render 1
// render 2
// render 2

我可以理解第一次重新渲染，因为 state 从“1”更改为“2”，

但我不明白第二次重新渲染

Answer 1

我认为这很好地解释了异常：

如果您将 State Hook 更新为与当前 state 相同的值，React 将在不渲染子节点或触发效果的情况下退出。 （React 使用 Object.is 比较算法。）

请注意，React 可能仍需要在退出之前再次渲染该特定组件。 这不应该是一个问题，因为 React 不会不必要地 go “深入”到树中。 如果您在渲染时进行昂贵的计算，您可以使用 useMemo 对其进行优化

注意最后一段。 这是直接从这里引用的。

Answer 2

我认为代码中缺少一些东西。 我检查了我的结束。 按照我们的预期，它运行良好。

谢谢

import React from "react";
import "./styles.css";
import { useState } from "react";

export default function App() {
  const [a, setA] = useState(1);
  console.log("render", a);
  return (
    <button
      onClick={() => {
        setA(a + 1);
      }}
    >
      {a}
    </button>
  );
}