当 value 相等时，React hooks useState setValue 仍然重新渲染一次

Question

我有下面的示例代码：

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 次“渲染”消息。对我来说，应该只有 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 次额外的重新渲染

Answer 1

这个帖子可以帮助你：React: Re-Rendering on Setting State - Hooks vs. this.setState

另外，您可以查看here 上的第二段：

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

Answer 2

React 无法猜测 render() 的输出不会改变：它必须再次 render() 并将结果与​​之前的 render() 进行比较。

然后神奇的事情发生了：如果没有差异，则 DOM 不会更新；如果存在差异，它会尝试仅根据需要创建/销毁元素，因为那是昂贵的部分，而不是运行 render() - 不应该。

更改状态通常会触发对 render() 的调用（不一定是 DOM 修改）——但如果您想控制该行为，请定义 shouldComponentUpdate。

---

注意：这适用于非钩子组件。但是，我不知道 hooks 的行为与常规组件的行为略有不同：看来您期望 setState 在值不变时不触发渲染是正确的— 见 Yash Joshi 的回答。