3. 实现 Reconciler

摘要

Reconciler 简介
实现 FiberNode
实现 Reconciler 工作流程

相关代码可在 git tag v1.3open in new window 查看

1. Reconciler 简介

在前端框架出现之前，通常会使用 jQuery 这样的库来开发页面。jQuery 是一个过程驱动的库，开发者需要直接调用浏览器的宿主环境 API，例如 DOM 操作等。这意味着开发者需要手动管理页面状态和交互，通过执行一系列的操作来更新页面。

然而，随着前端框架的出现，工作方式发生了根本性的变化，从过程驱动转变为状态驱动。在状态驱动的模式下，开发者不再直接操作宿主环境 API，而是通过前端框架提供的运行时核心模块来管理页面状态和更新。这些核心模块，例如 React 中的 Reconciler 和 Vue 中的 Renderer，负责将开发者编写的代码翻译成对应的宿主环境 API 调用，以更新页面。

Reconciler 的中文名叫协调器，它负责处理 React 元素的更新并在内部构建虚拟 DOM，这个过程是 React 框架实现高效的 UI 渲染和更新的核心逻辑所在。以下是 Reconciler 主要做的事情：

接收并解析 React 元素： Reconciler 接收 JSX 或者 createElement 函数返回的 React 元素，并将其解析成虚拟 DOM 树的结构。
协调更新： 比较新旧虚拟 DOM 树的差异，确定哪些部分需要更新，并生成更新计划。
构建虚拟 DOM 树： 在组件更新时，根据生成的更新计划，Reconciler 会更新虚拟 DOM 树的结构以反映最新的组件状态。
生成 DOM 更新指令： 将更新后的虚拟 DOM 树转换为真实的 DOM 更新指令，描述了如何将变更应用到实际的 DOM 树上。

我们先在 packages 目录下新建一个 react-reconciler 文件夹，执行 npm init，并更改配置文件如下，执行 pnpm i 安装依赖。

// packages/react-reconciler/package.json
{
	"name": "react-reconciler",
	"version": "1.0.0",
	"description": "react reconciler",
	"module": "index.ts",
	"dependencies": {
		"shared": "workspace: *"
	},
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC"
}

2. 实现 FiberNode

FiberNode（纤维节点）是 Reconciler 的核心数据结构之一，用于构建协调树。Reconciler 使用 FiberNode 来表示 React 元素树中的节点，并通过比较 Fiber 树的差异，找出需要进行更新的部分，生成更新指令，来实现 UI 的渲染和更新。

每个 FiberNode 都表示着 React 元素树中的一个节点，它包含了以下几个重要的字段：

type：节点的类型，可以是原生 DOM 元素、函数组件或类组件等；
props：节点的属性，包括 DOM 元素的属性、函数组件的 props 等；
stateNode：节点对应的实际 DOM 节点或组件实例；
child：指向节点的第一个子节点；
sibling：指向节点的下一个兄弟节点；
return：指向节点的父节点；
alternate：指向节点的备份节点，用于在协调过程中进行比较；
effectTag：表示节点的副作用类型，如更新、插入、删除等；
pendingProps：表示节点的新属性，用于在协调过程中进行更新。

接下来我们来实现一下 FiberNode 这个数据结构。

在 packages/react-reconciler/src/ 目录下新建 fiber.ts 文件，用来实现 FiberNode 类；新建 workTags.ts 文件，用于标识不同类型的工作单元；新建 fiberFlags.ts 文件，用于标识不同类型的副作用；代码如下：

fiber.ts

// packages/react-reconciler/src/fiber.ts
import { Props, Key, Ref } from 'shared/ReactTypes';
import { WorkTag } from './workTags';
import { NoFlags, Flags } from './fiberFlags';

export class FiberNode {
	tag: WorkTag;
	key: Key;
	stateNode: any;
	type: any;
	return: FiberNode | null;
	sibling: FiberNode | null;
	child: FiberNode | null;
	index: number;
	ref: Ref;
	pendingProps: Props;
	memoizedProps: Props | null;
	memoizedState: any;
	alternate: FiberNode | null;
	flags: Flags;
	subtreeFlags: Flags;
	updateQueue: unknown;

	constructor(tag: WorkTag, pendingProps: Props, key: Key) {
		// 类型
		this.tag = tag;
		this.key = key;
		this.ref = null;
		this.stateNode = null; // 节点对应的实际 DOM 节点或组件实例
		this.type = null; // 节点的类型，可以是原生 DOM 元素、函数组件或类组件等

		// 构成树状结构
		this.return = null; // 指向节点的父节点
		this.sibling = null; // 指向节点的下一个兄弟节点
		this.child = null; // 指向节点的第一个子节点
		this.index = 0; // 索引

		// 作为工作单元
		this.pendingProps = pendingProps; // 表示节点的新属性，用于在协调过程中进行更新
		this.memoizedProps = null; // 已经更新完的属性
		this.memoizedState = null; // 更新完成后新的 State

		this.alternate = null; // 指向节点的备份节点，用于在协调过程中进行比较
		this.flags = NoFlags; // 表示节点的副作用类型，如更新、插入、删除等
		this.subtreeFlags = NoFlags; // 表示子节点的副作用类型，如更新、插入、删除等
		this.updateQueue = null; // 更新计划队列
	}
}

workTags.ts

// packages/react-reconciler/src/workTags.ts
export type WorkTag =
	| typeof FunctionComponent
	| typeof HostRoot
	| typeof HostComponent
	| typeof HostText;

export const FunctionComponent = 0;
export const HostRoot = 3;
export const HostComponent = 5;
export const HostText = 6;

fiberFlags.ts

// packages/react-reconciler/src/fiberFlags.ts
export type Flags = number;

export const NoFlags = 0b0000000;
export const PerformedWork = 0b0000001;
export const Placement = 0b0000010;
export const Update = 0b0000100;
export const ChildDeletion = 0b0001000;