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 的工作原理。

相关文章
|
5月前
|
前端开发 JavaScript
React如何进行条件渲染
React如何进行条件渲染
36 0
|
2月前
|
资源调度 前端开发 API
React Suspense与Concurrent Mode:异步渲染的未来
React的Suspense与Concurrent Mode是16.8版后引入的功能,旨在改善用户体验与性能。Suspense组件作为异步边界,允许子组件在数据加载完成前显示占位符,结合React.lazy实现懒加载,优化资源调度。Concurrent Mode则通过并发渲染与智能调度提升应用响应性,支持时间分片和优先级调度,确保即使处理复杂任务时UI仍流畅。二者结合使用,能显著提高应用效率与交互体验,尤其适用于数据驱动的应用场景。
60 20
|
2月前
|
前端开发
React 如何使用条件渲染
【8月更文挑战第17天】React 如何使用条件渲染
35 3
|
2月前
|
前端开发 JavaScript 中间件
|
2月前
|
前端开发 JavaScript 数据管理
React 中无渲染组件
【8月更文挑战第31天】
25 0
|
2月前
|
前端开发 JavaScript 搜索推荐
|
2月前
|
前端开发 JavaScript 开发者
React Server Component 使用问题之为什么选择使用 React 官方的 renderToString 来渲染 HTML,如何解决
React Server Component 使用问题之为什么选择使用 React 官方的 renderToString 来渲染 HTML,如何解决
|
3月前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
59 0
|
5月前
|
存储 JavaScript 算法
React聚焦渲染速度
React聚焦渲染速度
43 0
|
5月前
|
存储 前端开发 JavaScript
在回调函数中重新渲染React组件
在React中,重新渲染组件可通过`forceUpdate()`或`ReactDOM.render()`实现。方法一是使用`forceUpdate`强制无状态组件更新;方法二是通过重新创建根组件实例适用于有状态组件。这些示例基于Webpack和Babel的模块热替换配置。根据项目需求和React版本,还可以结合React-Router或Redux等库选择合适的方法。