23 React 如何构建 workInProgress 树慕课专栏1
需积分: 0 4 浏览量
2022-08-03
11:32:57
上传
评论
收藏 365KB PDF 举报
更新时间：2020-09-18 10:04:42
23 React 如何构建如何构建 workInProgress 树树
前言前言
前面提到，React 应用程序首次渲染时在 prerender 阶段构建了 fiberRoot 对象，并将整个应用程序根组件元素作
为更新内容加入到更新队列，然后附加到了 fiberRoot 对象上面。此时的 fiberRoot 对象将作为整个 Fiber 架构的根
基进入到 render 阶段。
应用程序渲染过程进入到 render 阶段时，React 的一项重要工作就是构建 workInProgress 树，在这个过程中
React 也会完成结点 diff 的逻辑，最终会得到用于更新到屏幕的副作用列表。
构建 workInProgress 树的过程也是执行「协调算法」过程，通过循环解析工作单元获取下一个 Fiber 结点，同时
父子结点和兄弟结点也会被串联起来。这个过程从整体上可以分为两步，分别是 初始化初始化 workInProgress 对象和对象和
完善完善 workInProgress 对象对象。首先，我们先看一下应用程序执行过程刚进入 render 阶段时的 fiberRoot 对象。
进入进入 render 阶段时阶段时 fiberRoot 对象对象
应用程序首次渲染过程刚进入 render 阶段时 fiberRoot 对象的结构如图 5.4.1。
辛苦是获得一切的定律。——牛顿
评论0