React渲染流程

简介: 应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。

在 React 渲染分为两个阶段,Render 和 Commit,Render 是修改 React 组件的状态,把需要更新的组件标记为待更新,在 Commit 阶段将待更新的组件进行渲染并最终更新到浏览器的 Dom 树中。

Render 阶段是可以并执行操作的,组件状态如有变更,保留新的状态,抛弃老的状态,这个阶段就是虚拟 Dom 更新阶段,不是简单销毁并重新构建,而是通过一系列比较算法只更新有变化的属性。

Commit 阶段是同步执行的,该阶段是进行最终的 Dom 渲染,在最终渲染页面之前会执行组件的useLayoutEffects方法。

下图中描述了渲染流程。
页面初次渲染完成之后,通过 useState 或者 useReducer 进行数据的更新从而使得 UI 进行再次渲染。React 通过 Batch 方式将所有的数据更新整合在一起,而不是每次都进行更新。这个Batch 机制只是针对 React 的事件,而不会对浏览器的事件进行整合,例如按钮点击这种用户的主动行为。

React 通过底层 Fiber 架构进行组件的状态管理以及更新。React Fiber 是 React 内部的一种协调算法,用于提高 React 应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。

相关文章
|
4天前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
14天前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
22 1
|
9天前
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求,合理运用相关特性和策略,不断进行优化和调整,以达到最佳的性能提升效果。同时,要密切关注 React 的发展和更新,以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法,让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
|
1天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
14天前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
44 6
|
12天前
|
前端开发 JavaScript
React 条件渲染
10月更文挑战第9天
21 0
|
3月前
|
资源调度 前端开发 API
React Suspense与Concurrent Mode:异步渲染的未来
React的Suspense与Concurrent Mode是16.8版后引入的功能,旨在改善用户体验与性能。Suspense组件作为异步边界,允许子组件在数据加载完成前显示占位符,结合React.lazy实现懒加载,优化资源调度。Concurrent Mode则通过并发渲染与智能调度提升应用响应性,支持时间分片和优先级调度,确保即使处理复杂任务时UI仍流畅。二者结合使用,能显著提高应用效率与交互体验,尤其适用于数据驱动的应用场景。
64 20
|
3月前
|
前端开发
React 如何使用条件渲染
【8月更文挑战第17天】React 如何使用条件渲染
40 3
|
3月前
|
前端开发 JavaScript 中间件
|
3月前
|
前端开发 JavaScript 数据管理
React 中无渲染组件
【8月更文挑战第31天】
28 0