详细概括 React 新版本（16）初始渲染流程

最新推荐文章于 2025-02-11 18:02:47 发布

大唐荣华

最新推荐文章于 2025-02-11 18:02:47 发布

阅读量653

点赞数 1

CC 4.0 BY-SA版权

分类专栏：大前端文章标签：前端 react javascript

本文链接：https://blog.csdn.net/weixin_40599109/article/details/112580092

本文详细阐述了React新版本（16）的初始渲染流程，从jsx转换成React元素，经过协调层的Fiber数据结构构建与DOM操作标记，到提交阶段的DOM更新。jsx通过babel转译，生成ReactElement，在render阶段创建Fiber对象并标记DOM操作，最后在commit阶段执行实际的DOM更新。

核心过程：JSX -> babel -> createElement -> ReactElement -> render -> workInProgress Fiber -> commit -> getSnapShotBeforeUpdate -> dom ->lifeCircle/hook

逻辑细节：

1. jsx 转换成 react 元素

babel-react 会将jsx 调用 React.createElement
React.createElement 会 jsx 转换成 react element （react element 就是一个用来描述react 元素的对象。）

2. render （协调层）此阶段负责创建 Fiber 数据结构并为 Fiber 节点打标记，标记当前 Fiber 节点要进行的 DOM 操作。

首先为每一个react 元素构建 fiber 对象 (workInProgress Fiber 树）创建此 fiber 对象对应的 DOM 对象，为 fiber 对象添加 effectTag 属性（用来记录当前 Fiber 要执行的 DOM 操作），然后在render 结束后， fiber 会被保存到 fiberroot 中。

代码层步骤：