调和阶段 setState内部干了什么

最新推荐文章于 2025-06-07 16:30:00 发布

宫商羽

最新推荐文章于 2025-06-07 16:30:00 发布

阅读量207

点赞数

文章标签： ui javascript react.js

本文链接：https://blog.youkuaiyun.com/m0_65349389/article/details/128237825

版权

本文解释了在React中调用setState时发生的过程。当组件的状态更新时，React会启动一个名为和解的过程来高效地更新UI。此过程涉及创建一个新的React元素树，并将其与之前的树进行比较以确定UI所需的最小更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态

这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）

一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）

通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宫商羽

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

React常见面试题目9w字|-3setState调用原理，批量更新，setState和replace ,getDefaultProps,props,state,制度的，

VAN

04-22

168

this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念：纯函数。它有几个特点：●给定相同的输入，总是返回相同的输出。●过程没有副作用。●不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用。

React的setState

m0_72030584的博客

05-05

897

React的setState之后发生了什么

参与评论您还未登录，请先登录后发表或查看评论

调和阶段 setState干了什么

Sink

12-08

206

setState

调和阶段setState内部干了什么

m0_68009075的博客

01-05

135

调和阶段setState内部干了什么

调和阶段setState干了什么？

hyqhyqhyqq的博客

01-31

273

1.代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。4.在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。3.在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；

深入react源码看setState究竟做了什么？

weixin_59558923的博客

11-28

213

上文只是描述了一个最简单的使用场景，各位可以根据本文配合源码，进行以下两个尝试：Q1. 多个state的时候有什么变化？// ... }A1. 将会构建一个上文所提到的hook链Q2. 对同个state多次调用setState时有什么变化？A2. 将会构建一个上文所提到的update链。

React：setState同步or异步？

Ben_Simons

06-06

771

‘最熟悉的陌生人’ 当你入门React的时候，接触的第一波API里一定有setState-----数据驱动视图。当你项目的数据流乱作一团的时候，始作俑者也往往是setState----工作机制太复杂，文档又不说清楚。setState 的工作机制渐渐与 React 调和算法并驾齐驱，成了 React 核心原理中区分度最高的知识模块之一。“神奇时刻”到底何时发生? state到底是在哪个环节发生了变化呢? 所谓的“恰恰好”又如何界定呢?关于setState的问题，由下面一段代码说起：给出一个这样的 App 组

React组件的DidMount事件里的setState事件

weixin_33940102的博客

01-12

1757

参考原文： React 源码剖析系列－解密 setState setState 之后发生了什么 —— 浅谈 React 中的 Transaction 无法多次setState React组件的componentDidMount事件里使用setState方法，会有一些有趣的事情： class Example extends React.Component { construct...

React 的调和算法（Diffing 算法）

独碟的博客

10-18

2562

目录算法策略单节点diffing 数组节点diffing key值的使用要求算法策略 React的调和算法，主要发生在render阶段，调和算法并不是一个特定的算法函数，而是指在调和过程中，为提高构建workInProcess树的性能，以及Dom树更新的性能，而采用的一种策略，又称diffing算法。在React 的官网上描述“Diffing” 算法时，提到了“diffing ...

【面试题总结】

weixin_62198015的博客

12-14

192

1. Vue组件通信？ 2. 说说你对vuex的理解？写出其原理的核心代码？ 3. 说说React生命周期中有哪些坑？如何避免？ 4. 说说你对React中虚拟dom的理解？ 5. 调和阶段setState干了什么？ 6. React组件之间如何通信？ 7. 说说redux的实现原理是什么，写出其原理的核心代码？ 8. 说说Connect组件的原理是什么？ 9. 说说react 中jsx语法糖的本质？ 10. CDN的特点及意义？ 11. 什么是闭包，应用场景是什么？ 12. 从浏览器地址栏输入url到显示

调用setState后发生了什么

weixin_47552598的博客

10-19

1724

（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。（2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；（3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；（4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，

React中的setState都做了什么，同步还是异步?

shadowfall的博客

03-11

881

setState能做什么? 首先setState的出现是因为，React并不会绑定视图和state，需要手动去更新视图，所以setState就出现了，它帮助我们更改数据的同时并且通知视图进行渲染。第二个能力是性能优化，可以认为setState是异步的，React在setState之后，会经对state进行diff，判断是否有改变，然后去diff dom决定是否要更新UI。如果这一系列过程立刻发生在每一个setState之后，就可能会有性能问题。在短时间内频繁setState。React会将state的改

【前端面试题总结】

weixin_62198015的博客

12-08

306

React合成事件的原理？React组件之间如何通信？为什么react元素有一个$$type属性Connect组件的原理是什么？说说你对fiber架构的理解？解决了什么问题？说说你对redux中间件的理解？常用的中间件有哪些？实现原理？React性能优化的手段有哪些？说说你对件循环event loop的理解？前端跨域的解决方案？数组常用方法及作用，至少15个？React render方法的原理，在什么时候会触发？说说你对vue中mixin的理解？for...in循环和for...of循环的区别？Js数据类型

React的调和过程（Reconcilliation）

qq_44786519的博客

10-05

1124

Reconciliation 是实现UI更新的一个过程。目的就是在用户无感知的情况下降数据的更新体现到UI上。触发调和的方式 ReactDom.render() 函数和 ReactNativeRender.render()函数 setState()函数 forceUpdate()函数的调用 comopnentWillMount 和 componentWillReceiveProp 中直接修改了state（地址） hooks中的useReducer 和 useState 返回的钩子函数 virtual

WINUI——Magewell视频捕捉开发手记

bianguanyue的博客

06-03

1310

因需要融合视频，并加载患者CT中提取出的气管镜与病变，以便能实时查看气管镜是否在正确位置。

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

Kelvin_Yan的专栏

06-04

456

qt+vs插件 Generated File文件丢失导致编译失败的问题

腾讯 ovCompose 开源，Kuikly 鸿蒙和 Compose DSL 开源，腾讯的“双”鸿蒙方案发布

恋猫de小郭的博客

06-03

1382

近日，腾讯的 ovCompose 和 Kuikly 都发布了全新开源更新，其中，而 ovCompose 是腾讯视频团队基于 Compose Multiplatform 生态推出的跨平台开发框架，那可能有人要问了，这两者有什么关系？首先它们都是属于腾讯大前端领域 Oteam ，并且 ovCompose 和 Kuikly 都依赖于 KuiklyBase ，。

使用WPF的Microsoft.Xaml.Behaviors.Wpf中通用 UI 元素事件

最新发布

愿你历尽千帆，归来仍是少年。

06-07

353

【代码】使用WPF的Microsoft.Xaml.Behaviors.Wpf中通用 UI 元素事件。

react setState 的源码时什么样子的

03-22

React 中 `setState` 是用于更新组件状态的核心方法之一。它的工作原理涉及到 React 内部的状态管理和调度机制。下面是关于 `setState` 源码的基本介绍： ### 1. **函数签名** ```javascript this.setState(updater, [callback]) ``` - 参数一 (`updater`)：可以是一个对象或函数。如果是对象，则直接合并到当前状态；如果是函数，则接收前一个状态和当前属性作为参数。 - 参数二 ([callback])：可选的回调函数，在状态更新并完成渲染后执行。 --- ### 2. **核心逻辑** #### （1）**接受状态更新** 当我们调用 `setState` 时，React 并不会立即修改 state 值，而是将传入的对象或函数存储起来，并标记该组件需要重新渲染。 ```javascript function setState(partialState, callback) { // 验证是否在合法上下文中调用 const fiber = getInternalInstanceByElement(this); if (typeof partialState === 'function') { // 如果 updater 是函数形式，则存下来稍后再处理 enqueueUpdate(fiber, { type: UPDATE_STATE, payload: partialState }); } else { // 直接传递对象的情况 enqueueUpdate(fiber, { type: REPLACE_STATE, payload: partialState }); } // 注册回调函数（如果提供） if (callback !== undefined && typeof callback === "function") { scheduleCallbackAfterRender(callback); } } ``` #### （2）**批量更新优化** React 使用了“批处理”技术来提高性能。例如在一个事件循环中多次调用 `setState`，React 可能会将其合并成一次更新操作。这种行为通过维护一个队列实现——每次调用 `setState` 时并不会立刻触发渲染，而只是把新的状态变更推送到队列里。等到所有变化都收集完毕之后再统一计算差异、执行 DOM 更新以及生命周期钩子。 #### （3）**异步特性** 在现代版本中，默认情况下大部分场景下 `setState` 的执行是异步的（除非强制同步如 `flushSync()`）。这有助于避免频繁阻塞主线程。 #### （4）**最终状态合并** 状态的实际值是在 commit 阶段由 scheduler 执行任务期间确定下来的，此时旧的状态会被拿出来跟新提供的部分做浅层 merge。 --- ### 3. **简化的伪代码模拟** 为了便于理解其流程，这里给出一段简化版的源码示意： ```js class Component { constructor(props){ this.state={}; this.updatesQueue=[]; } setState(stateChangeOrFn, optionalCallback){ let updateInfo; if(typeof stateChangeOrFn==="function"){ updateInfo=stateChangeOrFn; }else{ updateInfo=(prevState)=>({...prevState,...stateChangeOrFn}); } // 将本次更新加入队列 this.updatesQueue.push(updateInfo); // 调度更新任务 requestWorkBatched(() => { while(this.updatesQueue.length>0){ const nextStateUpdater=this.updatesQueue.shift(); this.state=nextStateUpdater(this.state); } // 触发视图刷新... this.render(); // 回调函数若有则执行 optionalCallback?.call(null) }) } } // 示例使用法 let c=new Component({name:"world"}); c.setState({count:5},()=>console.log("done!")); ``` --- ### 总结虽然真实的 `setState` 实现比上面展示复杂得多，但它大致遵循这样一个模式：先缓存数据更改 -> 合并多个连续的操作 -> 异步触发生命周期及界面重绘过程。