当值相等时，React hooks 使用状态设置值仍然会重新渲染一次

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

这个线程可以帮助你： 反应：在设置状态时重新渲染 - 钩子与这个.setState

另外，您可以在此处查看第二段，其中说：

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

Answer 2

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

然后神奇的事情发生了：如果没有差异，DOM 就不会更新;如果有差异，它会尝试只根据需要创建/销毁元素，因为这是昂贵的部分，而不是运行 render() — 好吧，它不应该是。

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

---

注意：这适用于非挂钩组件。但是，我不知道钩子的行为与常规组件的行为略有不同：似乎您期望setState值不变时不触发渲染是正确的 - 请参阅Yash Joshi的答案。