为何React组件传入相同state值时第二次点击仍重渲染，第三次却跳过？

代码片段 #

import { useState } from "react";

function App() {
  const [state, setState] = useState(0);

  return (
    <>
      {console.log("rendered...", state)}
      <button onClick={() => setState(1)}> Change </button>
    </>
  );
}

export default App;

运行输出 #

• 启动时：rendered...0
• 第一次点击：rendered...1
• 第二次点击：rendered...1
• 第三次点击：（无输出）

原因解析 #

核心是React的状态更新优化逻辑在起作用：

• 第二次点击仍触发渲染的原因：
  第一次点击后状态从0变为1，组件完成渲染，React记录当前状态为1。第二次点击setState(1)时，React会先启动渲染流程，在渲染过程中才会对比新状态与当前状态是否一致。虽然最终发现值相同不会更新DOM，但渲染流程已经执行，所以console会输出rendered...1。

• 第三次点击跳过重渲染的原因：
  第二次点击的相同值更新处理完成后，React会缓存这个「重复值更新」的记录。第三次点击时，React会在触发渲染流程前直接检测到：要设置的状态值和当前状态完全一致，且已有过相同的更新记录，于是直接跳过整个渲染流程，也就不会有console输出了。

本质是React的渐进式优化——第一次重复更新会走完整渲染流程（但跳过DOM更新），后续完全相同的更新则直接拦截，避免不必要的计算开销。

内容的提问来源于stack exchange，提问作者Li Chen