具有相同原始值的 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>
  );
}