位置: 编程技术 - 正文

深入研究React中setState源码(深入react技术栈)

编辑:rootadmin

推荐整理分享深入研究React中setState源码(深入react技术栈),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:深入理解react,react useimperativehandle,深入react技术栈pdf,深入react技术栈pdf,深入react技术栈pdf,react理解,深入理解react,react深入浅出,内容如对您有帮助,希望把文章链接给更多的朋友!

React作为一门前端框架,虽然只是focus在MVVM中的View部分,但还是实现了View和model的绑定。修改数据的同时,可以实现View的刷新。这大大简化了我们的逻辑,只用关心数据流的变化,同时减少了代码量,使得后期维护也更加方便。这个特性则要归功于setState()方法。React中利用队列机制来管理state,避免了很多重复的View刷新。下面我们来从源码角度探寻下setState机制。

1 还是先声明一个组件,从最开始一步步来寻源;

所以主要来看是否传入了updater参数,也就是说何时进行 new 组件;具体的updater参数是怎么传递进来的,以及是那个对象,参见

react源码分析系列文章下面的react中context updater到底是如何传递的

这里直接说结果,updater对象其实就是ReactUpdateQueue.js 中暴漏出的ReactUpdateQueue对象;

2 既然找到了setState之后执行的动作,我们在一步步深入进去

ReactUpdateQueue.js

深入研究React中setState源码(深入react技术栈)

可以看到enqueueSetState enqueueCallback 最后都会执行enqueueUpdate;

ReactUpdates.js

ReactDefaultBatchingStrategy.js

接下来我们看下React中的事物处理机制到底是如何运行的;

Transaction.js

接着会执行ReactUpdates.js中的flushBatchedUpdates方法

ReactUpdates.js中

ReactReconciler.js中

ReactCompositeComponent.js

this.state的更新会在_processPendingState执行完执行。所以两次setState取到的都是this.state.count最初的值0,这就解释了之前的现象。其实,这也是React为了解决这种前后state依赖但是state又没及时更新的一种方案,因此在使用时大家要根据实际情况来判断该用哪种方式传参。来看个小例子直观感受下

setState流程还是很复杂的,设计也很精巧,避免了重复无谓的刷新组件。它的主要流程如下

enqueueSetState将state放入队列中,并调用enqueueUpdate处理要更新的Component 如果组件当前正处于update事务中,则先将Component存入dirtyComponent中。否则调用batchedUpdates处理。 batchedUpdates发起一次transaction.perform()事务 开始执行事务初始化,运行,结束三个阶段 初始化:事务初始化阶段没有注册方法,故无方法要执行 运行:执行setSate时传入的callback方法,一般不会传callback参数 结束:更新isBatchingUpdates为false,并执行FLUSH_BATCHED_UPDATES这个wrapper中的close方法 FLUSH_BATCHED_UPDATES在close阶段,会循环遍历所有的dirtyComponents,调用updateComponent刷新组件,并执行它的pendingCallbacks, 也就是setState中设置的callback。

标签: 深入react技术栈

本文链接地址:https://www.jiuchutong.com/biancheng/369824.html 转载请保留说明!

上一篇:不使用 JS 匿名函数理由(js匿名函数作用域)

下一篇:JavaScript canvas实现围绕旋转动画(javascript的canvas)

  • 公司合同是公司员工个人名义签订如何入账?
  • 免税发票是增值税发票吗
  • 已经开了发票需要退款怎么处理
  • 原材料盘亏自然损耗
  • 修缮服务开票项目一览表
  • 开票要交印花税吗
  • 进项认证勾选在哪里操作
  • 公司给离职员工多发工资怎么办
  • 契税和印花税的计税依据是一致吗
  • 转让土地使用权属于销售无形资产吗
  • 公司无收入费用如何做账务处理核算?
  • 公司对项目管理方式
  • 三方协议怎么入账
  • 事业单位收个人部分社保怎么入账
  • 出口退税信息系统
  • 金税盘没票了
  • 劳务费需要预缴税款吗
  • 增值税专用发票验票
  • 公司店铺刷单的收入怎么记账
  • 开票含税和不含税哪个划算
  • 商品盘点溢余短缺的核算方法有哪些?
  • 初级会计备课指点
  • 城建税一定要当月缴纳吗
  • 非营利组织免税条件发生变化
  • Win11任务栏不显示
  • 税收返还的账务处理
  • 国外差旅费如何报销
  • 小微企业 记账
  • 基于php代码实现数据库
  • 域名服务费属于什么会计科目
  • csinject.exe是什么程序的进程 csinject进程是安全的吗
  • 投影仪哪种光源亮度高
  • php实现微信发红包的方法
  • php imagecopymerge
  • 销售费用负担的差异会计分录
  • 年终结算啥意思
  • 报销办公用品会计分录计入其他应付还是其他应收
  • 什么是应交税费未交增值税
  • 企业长期资金的筹集方式
  • wordpress 函数
  • 非常好看的头像
  • 令人感到惊艳
  • uniapp中uni.navigateTo传递变量
  • HttpServletRequest 获取参数
  • php static变量
  • 主营业务成本和生产成本的区别
  • 已经认证了的专利怎么办
  • 确认递延所得税资产时,应估计相关可抵扣
  • 实收资本资本公积印花税怎么申报
  • 润滑脂开票属于哪一类
  • 印花税购销合同计税依据
  • sql server 2008使用
  • mysql用中文字段
  • 财政拨款方式有哪几种
  • 普通费用发票不入账会有什么后果吗
  • 保险车辆理赔入账流程
  • 印花税怎么用
  • 无形资产未确认融资费用例题
  • 结构性存款是什么意思是理财
  • 其他应付款长期挂账几年必须转收入
  • 以前多计提的税款怎么办
  • 内部债权债务的抵消分录
  • 工程履约保证金退还申请书
  • 固定资产的后续计量
  • 给投资人的利润属于什么科目
  • 公司不按照劳动法给工资怎么办
  • 营业账簿印花税怎么申报
  • 对公转账需要填写开户行吗
  • 资产减值损失冲减
  • 出表的好处
  • mysql指定查询
  • 打开win七
  • vmware tools安装包在哪
  • 联想系统win8
  • Win10中SmartScreen无法设置需要系统管理员身份该怎么办?
  • windows 7光盘
  • win8怎么关电脑
  • win8旗舰版官方下载
  • win8的设置
  • 开的发票怎么抽奖
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设