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

相关文章
|
1月前
|
前端开发 JavaScript
React如何进行条件渲染
React如何进行条件渲染
17 0
|
20天前
|
前端开发 JavaScript
REACT 条件渲染
REACT 条件渲染
|
1月前
|
存储 前端开发 JavaScript
在回调函数中重新渲染React组件
在React中,重新渲染组件可通过`forceUpdate()`或`ReactDOM.render()`实现。方法一是使用`forceUpdate`强制无状态组件更新;方法二是通过重新创建根组件实例适用于有状态组件。这些示例基于Webpack和Babel的模块热替换配置。根据项目需求和React版本,还可以结合React-Router或Redux等库选择合适的方法。
|
1月前
|
存储 JavaScript 算法
React聚焦渲染速度
React聚焦渲染速度
28 0
|
1月前
|
存储 JSON 资源调度
next.js博客搭建_react-markdown渲染内容(第三步)
next.js博客搭建_react-markdown渲染内容(第三步)
15 1
|
1月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
1月前
|
前端开发 JavaScript
React中渲染html结构---dangerouslySetInnerHTML
React中渲染html结构---dangerouslySetInnerHTML
29 0
|
1月前
|
前端开发 JavaScript
React渲染性能的优化
React渲染性能的优化
33 2
|
1月前
|
前端开发
React 中条件渲染的 N 种方法
React 中条件渲染的 N 种方法
25 3
|
1月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
82 0