当前位置: 首页 > news >正文

调用setState 之后发生了什么?

触发状态更新

当你在组件里调用:
this.setState({ count: this.state.count + 1 });

React 并不会马上修改 this.state,而是 把更新请求放到一个队列中(即所谓的异步/批量更新机制)。

合并新旧状态

  • React 会将你传入的对象 { count: newValue } 和现有的 state 合并(shallow merge,浅合并)。

  • 如果传入的是函数 setState((prevState, props) => {...}),React 会先执行这个函数,得到新的部分 state,再合并。

标记组件需要更新

  • React 在内部给该组件打上一个 “需要重新渲染” 的标记。

  • 但此时不会立即更新 UI,而是交给 调度器(Scheduler) 统一管理,可能会延迟批处理(提高性能)。

调用 Reconciliation(协调算法)

  • React 会触发 虚拟 DOM 的 diff 过程,比较更新前后的 Virtual DOM 树。

  • 找出需要真正修改的部分(例如某个 <span> 的文字变了,而不是整个组件都重建)。

渲染更新(Commit 阶段)

  • React 把差异(DOM diff 结果)应用到真实 DOM 上。

  • 更新 UI,同时调用相关生命周期方法 / hooks:

  1. 类组件:componentDidUpdate

  2. 函数组件:useEffect(在 commit 后执行)

触发副作用

  • 例如 useEffect 的回调函数执行。

  • 如果有 setState 在这些副作用里,会再次触发更新,进入新的更新循环。

流程总结

调用 setState()↓
将更新加入队列(可能批处理)↓
合并 state↓
标记组件需要更新↓
虚拟 DOM diff↓
最小化更新真实 DOM↓
调用生命周期 / hooks

小知识点

  • setState 是 异步的(React 会合并多次调用以优化性能)。

  • 如果你需要拿到更新后的 state,可以用:

this.setState((prev) => ({ count: prev.count + 1 }), () => {console.log(this.state.count); // 回调里能拿到最新值
});
  • React 18 以后,在事件回调里,setState 默认是批量的。
http://www.hskmm.com/?act=detail&tid=20911

相关文章:

  • element plus 配置主题色
  • Python教程:解决pip安装包时报错:error: externally-managed-environment This environment is externally managed
  • 哲学家进餐问题
  • 16.1 总体主成分分析
  • 黄金分割比
  • 借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
  • 痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(11.B)- FlexSPI NOR连接方式大全(RT1180)
  • 文件同步工具深度测评(2025版):同步盘夺冠
  • Oracle故障处理:数据库启动时遇到ORA-01578错误
  • 【ACM出版|连续三届EI检索】第四届人工智能与智能信息处理国际学术会议(AIIIP 2025)
  • 【2025-09-28】平凡家庭
  • 实用指南:梦回童年,将JSNES 游戏模拟器移植到 HarmonyOS 移植指南
  • 单键触控感应芯片 电容是触控IC VKD233HS -永嘉微VINKA 原厂
  • 微算法科技(NASDAQ: MLGO)研发基于 DPoS 框架的 DL-DPoS(深度链接委托权益证明)机制,增强区块链的共识算法
  • JMM内存模型
  • 读者-写者问题
  • 实现邮件发送
  • AGC073C 赛后补题记录
  • LuatOS赋能Air780EPM:FTP通信开发教程正式上线!
  • DM40万用表为何全网爆火?!它有哪些与众不同?DM40万用表比肩千元级表,让您轻松实现专业级测量自由!
  • 树形dp [POI 2013] LUK-Triumphal arch
  • 【论术】t-design tree组件判断点击了角标还是label
  • leetCode刷题记录1
  • k8s下部署kuboard
  • ACL 第一周模拟赛题解
  • 万象EXCEL开发(三)格式解读calcChain.xml——东方仙盟练气期 - 指南
  • 302、寄门人
  • 达梦数据库用户开启限制白名单导致自身无法登录
  • 【转发】Nginx配置https
  • 本地文件多人多端同步工具:10款高性价比选择