React原理之Fiber双缓冲

news2024/9/22 13:25:41

前置文章：

React原理之 React 整体架构解读
React原理之整体渲染流程
React原理之Fiber详解

-----读懂这一篇需要对 React 整体架构和渲染流程有大致的概念 😊-----

在前面的文章中，简单介绍了 Fiber 架构，也了解了 Fiber 节点的概念。

Fiber 节点是 Fiber 架构的核心概念之一，它是一种虚拟 DOM 的实现方式。

Fiber 本质上是一个对象，使用了链表结构。

双重缓冲是一种渲染优化技术，其使用两个 Fiber 树来管理渲染，即当前树 current tree和工作树 work-in-progress tree。当前树代表屏幕上当前显示的内容，而工作树用于准备下一次的渲染更新，用以实现平滑的更新。

本篇将详细介绍 Fiber 架构的工作原理，即如何使用“双缓存”来完成 Fiber 树的构建与替换。

对于 fiber，我们已经有一些了解了。那么 fiber 节点构成的 fiber 树和页面上的 DOM 树有什么关系呢？我们经常看到的 fiber 双缓冲是什么？

双缓冲的概念

双缓冲（Double Buffering）是一种在计算机图形学和用户界面设计中常用的技术，简单来说，就是通过将绘制和显示过程分离，改善图像渲染的流畅性和视觉效果。

在这里插入图片描述

如上图，普通的绘图方式就像是直接在电脑屏幕上画图，用户可以看到绘图的每一个步骤，这样不太优雅。

双缓冲就类似于首先在内存上创建一个“虚拟屏幕”，所有的图形绘制工作都在虚拟屏幕上完成。这个虚拟屏幕就像是一个幕后的画布，绘图或称首先在这个虚拟屏幕上进行，用户看不到绘图的过程。

当虚拟屏幕上的图形绘制完成时，绘图程序会迅速将整个画面一次性拷贝到电脑屏幕上，替换掉之前的画面，这个拷贝过程是瞬间完成的。

这样，用户在屏幕上看到的图像始终都是完整的。

React 中的双缓冲 fiber 树

在 React 源码中，很多方法都需要接收两颗 FiberTree：

function cloneChildFibers(current, workInProgress) {
	// ...
}

current 是当前屏幕上显示内容对应的 FiberNode，workInProgress 指的是正在内存中构建的 FiberNode。

两个 FiberNode 会通过 alternate 属性相互指向：

current.alternate = workInProgress;
workInProgress.alternate = current;

每次状态更新都会产生新的workInProgress Fiber Tree，通过current与workInProgress的替换，完成DOM更新。

可以从首次渲染（mount）和更新（update）这两个阶段来看一下 FiberTree 的构建/替换流程。

首次渲染（mount）

首先我们先了解一下几个概念：

fiberRootNode：整个应用的根节点,fiberRootNode的current会指向当前页面上已渲染内容对应Fiber树，即current Fiber Tree。
hostRootFiber: 它是一个具体的 Fiber 节点实例，具有 Fiber 节点的所有属性和方法。通常包含指向宿主环境（如 DOM）的引用，并且负责协调 React 组件与宿主环境之间的交互。
rootFiber：一个通用术语，用来指代 Fiber 树的根节点，包括HostRootFiber，其他类型的根 Fiber 等。
workInProgress Fiber Tree: 内存中构建的树，简写 WIP FiberTree。
current Fiber Tree: 页面显示的树。

// 示例
function App() {
	const [num, setNum] = useState(0);
	return <p onClick={() => setNum((prevNum) => prevNum + 1)}>{num}</p>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

流程一：

当执行 ReactDOM.createRoot 时：

// ReactFiberRoot.js 伪代码
function createFiberRoot() {
	//...

	// 创建 FiberRootNode 实例
	const root = new FiberRootNode(/* 参数 */);
	// 创建 HostRootFiber 实例
	const uninitializedFiber = createHostRootFiber(/* 参数 */);
	// 将 HostRootFiber 设置为 FiberRoot 的 current 属性
	root.current = uninitializedFiber;

	// ...
	return root;
}

此时会创建 fiberRootNode 和 hostRootFiber，fiberRootNode 通过 current 来指向 hostRootFiber。

即创建如下的结构：

在这里插入图片描述

由于是首屏渲染，页面中还没有挂载任何DOM，所以fiberRootNode.current指向的rootFiber没有任何子Fiber节点（即 current Fiber Tree 为空）。

流程二 (render)

接下来进入render阶段，根据组件返回的 JSX 在内存中以深度优先原则依次创建wip FiberNode并连接在一起构建 Fiber 树，即workInProgress Fiber Tree。

在这里插入图片描述

生成的 wip FiberTree 里面的每一个 FiberNode 会和 current FiberTree 里面的 FiberNode 通过alternate进行关联。但是目前 currentFiberTree 里面只有一个 HostRootFiber，因此就只有这个 HostRootFiber 进行了 alternate 的关联。

流程三 (commit)

当 wip FiberTree 生成完毕后，进入 commit 阶段，此时 FiberRootNode 就会被传递给 Renderer（渲染器），接下来就是进行渲染工作。已构建完的workInProgress Fiber Tree在此阶段渲染到页面。

渲染工作完毕后，浏览器中就显示了对应的 UI，此时 FiberRootNode.current 就会指向这颗 wip Fiber Tree，曾经的 wip Fiber Tree 它就会变成 current FiberTree，完成了双缓存的工作：

在这里插入图片描述

更新（update）

点击p节点触发状态改变而更新，这样就进入了 update。

流程四 (render)

update 会开启一次新的render阶段并构建一棵新的workInProgress Fiber Tree，流程和前面一样。

新的 wip Fiber Tree 里面的每一个 FiberNode 和 current Fiber Tree 的每一个 FiberNode 通过 alternate 属性进行关联。

在这里插入图片描述

流程五 (commit)

当 wip Fiber Tree 生成完毕后， workInProgress Fiber Tree就完成了render阶段的构建，进入commit阶段渲染到页面上。

在这里插入图片描述

FiberRootNode 会被传递给 Renderer 进行渲染，此时宿主环境所渲染出来的真实 UI 对应的就是左边 Fiber Tree (此时还是 wip Fiber Tree) 对应的 DOM 结构，FiberRootNode.current 就会指向左边这棵树，右边的树就再次成为了新的 wip Fiber Tree。

以上两棵 fiber 树交替并更新 DOM 的过程这就是 fiber 双缓冲的原理。