React中useState状态更新后console.log仅输出3次的原因咨询

先看你的组件代码：

import {useState} from 'react'

function App() {
  const [text,setText] = useState('Hi ')

  const updateText=()=>{
    setText('Hello ')
    console.log(text+"22222")
  }
  console.log(text+"11111")
  return (
    <div className="App">
      <span id="text">{text}</span>
      <button onClick={updateText}>Update</button>
    </div>
  );
}

export default App;

核心原因拆解 #

出现console.log(text+"11111")仅输出3次的现象，本质是React的状态更新闭包特性和无状态变化时的渲染优化机制共同作用的结果：

1. 首次渲染
   组件初始化时，text的初始值是Hi ，执行组件函数时触发console.log(text+"11111")，输出Hi 11111（第1次）。此时创建的updateText函数会捕获当前的text值（Hi ）。

2. 第一次点击Update按钮

• 执行updateText：因为闭包捕获的是初始的text值，所以输出Hi 22222。
• 调用setText('Hello ')：状态从Hi 变为Hello ，状态变化触发组件重新渲染，执行console.log(text+"11111")，输出Hello 11111（第2次）。这次渲染会生成新的updateText函数，捕获的text值变为Hello 。

3. 第二次点击Update按钮

• 执行updateText：闭包捕获的是上次渲染的text值（Hello ），所以输出Hello 22222。
• 调用setText('Hello ')：新状态和当前状态完全相同，但React在这次更新中可能因开发环境的内部检查机制，仍触发了一次渲染，输出Hello 11111（第3次）。

4. 第三次及以后点击Update按钮

• 执行updateText：依旧输出Hello 22222。
• 调用setText('Hello ')：React已确认状态没有发生变化，会直接跳过组件的重新渲染，因此组件函数不会执行，console.log(text+"11111")自然不再输出。

补充验证 #

如果想确认状态不变时的渲染行为，可以用React.memo包裹组件，或者手动在setText前判断状态是否相同，会发现当状态值无变化时，组件确实不会重新执行。

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