解码React源码之 Fiber结构的创建

2023-11-10 08:59:41

前言

React作为前端开发领域最受欢迎的框架之一，其源码的解析和理解一直备受开发者关注。Fiber架构作为React的核心，更是许多开发者想要深入探索的领域。本文将带您一探Fiber结构的奥秘，让您更深入地理解React的工作原理。

FiberRoot结构的创建

FiberRoot结构是React虚拟DOM树的根节点，负责管理整个虚拟DOM的创建和更新。在React中，FiberRoot结构的创建过程主要分为以下几个步骤：

创建FiberRootNode结构

FiberRootNode结构是FiberRoot结构的顶层节点，主要负责管理整个虚拟DOM树。在创建FiberRootNode结构时，React会根据当前运行环境（如浏览器或服务端）选择不同的创建方式。
创建HostRootFiber结构

HostRootFiber结构是FiberRootNode结构的第一个子节点，代表整个虚拟DOM树的根节点。它负责管理整个虚拟DOM树的更新和渲染。
创建CurrentFiber结构

CurrentFiber结构是HostRootFiber结构的当前副本，用于跟踪当前正在渲染的虚拟DOM节点。在每次更新过程中，React都会将HostRootFiber结构的副本赋值给CurrentFiber结构，并对CurrentFiber结构进行更新。
创建WorkInProgressFiber结构

WorkInProgressFiber结构是CurrentFiber结构的临时副本，用于存储在本次更新中需要修改的虚拟DOM节点。在更新过程中，React会根据更新规则修改WorkInProgressFiber结构，并最终将WorkInProgressFiber结构赋值给CurrentFiber结构。