我有下面的示例代码：

function App() {
  console.log("render");
  const [val, setVal] = React.useState(0);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => setVal(12)}>Update with same value</button>
    </div>
  );
}

当我多次单击一个按钮时，控制台会记录 3 次并显示“render”消息。对我来说，应该只有 2 次：

• 1 用于第一次渲染

• 2 用于从 val 0 到 12 的更新（单击按钮时）

从这一次开始，它不应重新渲染，因为相同的值 (12) 已更新为 val。

但是为什么会出现3次呢？这意味着尽管更新了相同的值，它仍然会重新渲染一次。

哪位知道的请解释一下，先谢谢了。

P/S：我发现它只会在值改变时导致额外的重新渲染，然后用相同的值更新

function App() {
  console.log("render");
  const [val, setVal] = useState(4);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => {
        setVal(val => val + 1)
      }}>Update</button>
      <button onClick={() => {
        setVal(val => val)
      }}>Update with same value</button>
    </div>
  );
}

当第一次点击第二个按钮时，没有重新渲染调用，但是如果你点击第一个按钮然后第二个按钮，第二个按钮会导致 1 次额外的重新渲染