为什么两段相似React代码渲染次数分别为3次和1次，渲染机制是什么

前置说明 #

你观察到的3次渲染是**React 18+ 开发环境开启严格模式（<StrictMode>）**的特有表现，生产环境下第一段代码仅会触发2次渲染，第二段始终仅触发1次渲染。

React渲染触发与Bailout核心机制 #

• 组件触发重渲染的核心场景：组件首次挂载、自身状态变更、父组件重渲染、使用的Context发生变更
• 状态更新的对比逻辑：调用setState更新状态时，React会先用Object.is()对比新状态与旧状态的差异：
  • 两者完全相等时，触发 Bailout（渲染退出） 逻辑，直接跳过当前组件的后续渲染流程，不会执行render函数
  • 两者不相等时，才会触发组件重渲染，执行render函数生成新的虚拟DOM
• 开发环境严格模式的特殊逻辑：为了检测组件内的不安全副作用，严格模式会在组件首次挂载时，额外执行一次render函数，这就是额外一次渲染的来源。

两段代码渲染次数差异的具体原因 #

第二段代码（仅渲染1次）执行流程 #

1. 组件首次挂载，执行render函数，num初始值为0，打印第一次render
2. setTimeout异步回调触发，调用setNumber(0)，React对比新旧num值，两者完全相等，触发Bailout逻辑，跳过后续重渲染，不会再次执行render函数

第一段代码（渲染3次）执行流程 #

1. 组件首次挂载，执行render函数，num初始值为0，打印第一次render
2. 开发环境严格模式触发副作用检测，额外执行一次render函数，打印第二次render
3. setTimeout异步回调触发，调用setNumber(1)，新旧num值0和1不相等，触发重渲染，执行render函数，打印第三次render

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