从源码的角度看 React JS 中批量更新 State 的策略(下)

简介: 这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用。前置文章列表深入理解 React JS 中的 setState从源码的角度再看 React JS 中的 setState从源码的角度看 React JS 中批量更新 State 的策略(上)1. batchingStrategy 策略现在我们开始来看 batchingStrategy 的策略定义。

截图

这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用。

前置文章列表

1. batchingStrategy 策略

现在我们开始来看 batchingStrategy 的策略定义。
目前 React 中 batchingStrategy 的定义为 ReactDefaultBatchingStrategy
ReactDefaultBatchingStrategy 包含两部分。

  • 最重要的部分 FLUSH_BATCHED_UPDATES。

截图

源码地址

实现在这里。
注意实现里定义了一个叫 pooled 的东西,后续我们会展开讨论这样设计的原理与好处。
React 将所有的组件丢到 pool 中去,然后都交给 runBatchedUpdates 去执行更新操作了。
同样,还有一个 asap 的概念,也在后续文章中讨论。

截图

源码地址

对所有的组件进行 performUpdateIfNecessary 的判断,并更新组件。

截图

源码地址

  • 另一个实现为 RESET_BATCHED_UPDATES,用于将 isBatchingUpdates 重置为 false,等待下次组件的批量更新。

截图

源码地址

2. 组件是否需要更新的比较 performUpdateIfNeeded

两个逻辑,比较组件是否需要更新,以及第二种条件下直接进行强制更新。
ReactReconciler.receiveComponent 在元素级别进行了比较,不过不一样那么就调用 receiveComponent
其他状态直接调用 updateComponent
注意这里的 updateComponent 函数的内部实现是递归的,这样的设计便于及时获取到哪些组件是已更新的状态,便于前台进行获取使用。

截图

截图

到这里我们就把整个 React 的更新逻辑策略的部分走完了,接下来我们会继续看一下 React 如何进行页面UI 的更新以及一些遗留的小知识点。


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
1天前
|
前端开发
React组件实例更改state状态值(四)
【8月更文挑战第14天】React组件实例更改state状态值(四)
6 1
React组件实例更改state状态值(四)
|
1天前
|
前端开发 JavaScript
React组件实例state(三)
【8月更文挑战第14天】React组件实例state(三)
7 1
React组件实例state(三)
|
11天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
1月前
|
JavaScript 前端开发 程序员
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
JavaScript是Web标准语言,广泛应用于各类浏览器,造就了其最广泛部署的地位。Node.js的兴起扩展了JavaScript的使用场景,使其成为开发者首选语言。无论新手还是经验丰富的程序员,都能受益于学习JavaScript。[《JavaScript权威指南第7版》资源链接](https://zhangfeidezhu.com/?p=224)
67 5
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
|
24天前
|
缓存 JavaScript 前端开发
JavaScript框架中的性能优化策略
【7月更文挑战第27天】JavaScript框架中的性能优化是一个持续的过程,需要开发者在开发过程中不断关注和改进。通过代码优化、DOM操作优化、缓存机制、异步处理以及使用性能分析工具等策略,可以显著提升应用的性能,提升用户体验。在实际开发中,开发者应根据应用的具体需求和性能瓶颈选择合适的优化策略,以实现最佳的优化效果。
|
1月前
|
搜索推荐 网络架构 开发者
Next.js静态出口生成策略深度解析
【7月更文挑战第18天】Next.js凭借其强大的静态生成、静态出口生成以及服务器端渲染功能,为开发者提供了构建高性能、高SEO友好Web应用的强大工具。
|
1月前
|
存储 资源调度 JavaScript
Vue.js组件通信策略详解
【7月更文挑战第17天】通过以上几种策略,Vue.js 提供了灵活且强大的组件间通信能力,使得开发者可以构建出结构清晰、易于维护的大型应用。
|
10天前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
1月前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
17天前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码

热门文章

最新文章