从源码的角度看 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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
68 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
33 0
|
26天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
67 10
|
25天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
52 5
|
25天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
25天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
30天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
54 6
|
1月前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
27 1
|
25天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
下一篇
无影云桌面