万字长文介绍React Fiber架构的原理和工作模式

const element = <h1>Hello, world</h1>;

const element = React.createElement(
  'h1',
  null,
  'Hello, world'
);

{
  type: 'h1',  // 组件类型
  key: null,   // React key
  props: { ... }, // 输入的props
  state: { ... }, // 组件的state (如果是class组件或带有state的function组件)
  child: Fiber | null,  // 第一个子元素的Fiber
  sibling: Fiber | null,  // 下一个兄弟元素的Fiber
  return: Fiber | null,  // 父元素的Fiber
  // ...其他属性
}

function FiberNode(
  this: $FlowFixMe,
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // 基本属性
  this.tag = tag; // 描述此Fiber的启动模式的值（LegacyRoot = 0; ConcurrentRoot = 1）
  this.key = key; // React key
  this.elementType = null; // 描述React元素的类型。例如，对于JSX<App />，elementType是App
  this.type = null; // 组件类型
  this.stateNode = null; // 对于类组件，这是类的实例；对于DOM元素，它是对应的DOM节点。
 
  // Fiber链接
  this.return = null; // 指向父Fiber
  this.child = null; // 指向第一个子Fiber
  this.sibling = null; // 指向其兄弟Fiber
  this.index = 0; // 子Fiber中的索引位置
 
  this.ref = null; // 如果组件上有ref属性，则该属性指向它
  this.refCleanup = null; // 如果组件上的ref属性在更新中被删除或更改，此字段会用于追踪需要清理的旧ref
 
	// Props & State
  this.pendingProps = pendingProps; // 正在等待处理的新props
  this.memoizedProps = null; // 上一次渲染时的props
  this.updateQueue = null; // 一个队列，包含了该Fiber上的状态更新和副作用
  this.memoizedState = null; // 上一次渲染时的state
  this.dependencies = null; // 该Fiber订阅的上下文或其他资源的描述
 
	// 工作模式
  this.mode = mode; // 描述Fiber工作模式的标志（例如Concurrent模式、Blocking模式等）。
 
  // Effects
  this.flags = NoFlags; // 描述该Fiber发生的副作用的标志（十六进制的标识）
  this.subtreeFlags = NoFlags; // 描述该Fiber子树中发生的副作用的标志（十六进制的标识）
  this.deletions = null; // 在commit阶段要删除的子Fiber数组
 
  this.lanes = NoLanes; // 与React的并发模式有关的调度概念。
  this.childLanes = NoLanes; // 与React的并发模式有关的调度概念。
 
  this.alternate = null; // Current Tree和Work-in-progress (WIP) Tree的互相指向对方tree里的对应单元
 
	// 如果启用了性能分析
  if (enableProfilerTimer) {
		// ……
  }
 
	// 开发模式中
  if (__DEV__) {
    // ……
  }
}

// packages/react-reconciler/src/ReactFiberBeginWork.js
// 以下只是核心逻辑的代码，不是beginWork的完整源码
function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
	if (current !== null) {
		// 这是旧节点，需要检查props和context是否有变化再确认是否需要更新节点
		const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;
 
		if(oldProps !== newProps || hasLegacyContextChanged()) {
			didReceiveUpdate = true; // props和context有变化，说明节点有更新
		} else {
			// 其它特殊情况的判断
		}
	} else {
		didReceiveUpdate = false; // 这是新节点，要创建，而不是更新
	}
 
	workInProgress.lanes = NoLanes; // 进入beginWork表示开始新的工作阶段，所以要把旧的workInProgress优先级清除掉
 
	switch (workInProgress.tag) {
		// 通过workInProgress的tag属性来确定如何处理当前的Fiber节点
		// 每一种tag对应一种不同的Fiber类型，进入不同的调和过程（reconcileChildren()）
		case IndeterminateComponent: // 尚未确定其类型的组件
		// ……
		case LazyComponent: // 懒加载组件
		// ……
		case FunctionComponent: // 函数组件
		// ……
		case ClassComponent: // 类组件
		// ……
		
		// 其它多种Fiber类型
		// case ……
	}
}

// packages/react-reconciler/src/ReactFiberBeginWork.js
export function reconcileChildren(
  current: Fiber | null,
  workInProgress: Fiber,
  nextChildren: any, // 要调和的新的子元素
  renderLanes: Lanes,
) {
  if (current === null) {
		// 如果current为空，说明这个Fiber是首次渲染，React会为nextChildren生成一组新的Fiber节点
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
		// 当current非空时，React会利用现有的Fiber节点（current.child）和新的子元素（nextChildren）进行调和
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes,
    );
  }
}

// packages/react-reconciler/src/ReactFiberWorkLoop.js
// 以下只是核心逻辑的代码，不是completeUnitOfWork的完整源码
function completeUnitOfWork(unitOfWork: Fiber): void {
	let completedWork: Fiber = unitOfWork; // 当前正在完成的工作单元
	do {
		const current = completedWork.alternate; // 当前Fiber节点在另一棵树上的版本
		const returnFiber = completedWork.return; // 当前Fiber节点的父节点
 
		let next;
    next = completeWork(current, completedWork, renderLanes); // 调用completeWork函数
 
		if (next !== null) {
			// 当前Fiber还有工作要完成
		  workInProgress = next;
		  return;
		}
		const siblingFiber = completedWork.sibling;
    if (siblingFiber !== null) {
			// 如果有兄弟节点，则进入兄弟节点的工作
      workInProgress = siblingFiber;
      return;
    }
    // 如果没有兄弟节点，回到父节点继续
    completedWork = returnFiber;
    workInProgress = completedWork;
	} while (completedWork !== null);
 
	// 如果处理了整个Fiber树，更新workInProgressRootExitStatus为RootCompleted，表示调和已完成
  if (workInProgressRootExitStatus === RootInProgress) {
    workInProgressRootExitStatus = RootCompleted;
  } 
}

// packages/react-reconciler/src/ReactFiberCompleteWork.js
// 以下只是核心逻辑的代码，不是completeWork的完整源码
function completeWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  const newProps = workInProgress.pendingProps;
	switch (workInProgress.tag) {
    // 多种tag
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent:
			 bubbleProperties(workInProgress)
      return null;
    case ClassComponent:
			 // 省略逻辑
      // ……
			 bubbleProperties(workInProgress)
      return null;
    case HostComponent:
			 // 省略逻辑
      // ……
      return null;
    // 多种tag
		// ……
  }
}

// packages/react-reconciler/src/ReactFiberCompleteWork.js
// 以下只是核心逻辑的代码，不是bubbleProperties的完整源码
function bubbleProperties(completedWork: Fiber) {
	const didBailout =
    completedWork.alternate !== null &&
    completedWork.alternate.child === completedWork.child; // 当前的Fiber与其alternate（备用/上一次的Fiber）有相同的子节点，则跳过更新
 
  let newChildLanes = NoLanes; // 合并后的子Fiber的lanes
  let subtreeFlags = NoFlags; // 子树的flags。
 
	if (!didBailout) {
		// 没有bailout，需要冒泡子Fiber的属性到父Fiber
		let child = completedWork.child;
		// 遍历子Fiber，并合并它们的lanes和flags
    while (child !== null) {
      newChildLanes = mergeLanes(
        newChildLanes,
        mergeLanes(child.lanes, child.childLanes),
      );
 
      subtreeFlags |= child.subtreeFlags;
      subtreeFlags |= child.flags;
 
      child.return = completedWork; // Fiber的return指向父Fiber，确保整个Fiber树的一致性
      child = child.sibling;
    }
		completedWork.subtreeFlags |= subtreeFlags; // 合并所有flags（副作用）
	} else {
		// 有bailout，只冒泡那些具有“静态”生命周期的flags
		let child = completedWork.child;
    while (child !== null) {
      newChildLanes = mergeLanes(
        newChildLanes,
        mergeLanes(child.lanes, child.childLanes),
      );
 
      subtreeFlags |= child.subtreeFlags & StaticMask; // 不同
      subtreeFlags |= child.flags & StaticMask; // 不同
 
      child.return = completedWork;
      child = child.sibling;
    }
		completedWork.subtreeFlags |= subtreeFlags;
	}
	completedWork.childLanes = newChildLanes; // 获取所有子Fiber的lanes。
 
	return didBailout;
}

假设有两种标识符：
Placement (表示新插入的子节点)：0b001
Update (表示子节点已更新)：0b010
 
A
├─ B (Update)
│   └─ D (Placement)
└─ C
   └─ E
 
这个例子里，计算逻辑是这样：
1、检查到A的flags没有副作用，直接复用，但subtreeFlags有副作用，那么递归检查B和C
2、检查到B的flags有复用，更新B，subtreeFlags也有副作用，则继续检查D
3、检查到C的flags没有副作用，subtreeFlags也没有副作用，那么直接复用C和E
如果节点更多，则以此类推。
这样的计算方式可以减少递归那些没有副作用的子树或节点，所以比以前的版本全部递归的算法要高效

// packages/react-reconciler/src/ReactFiberWorkLoop.js
// 以下只是核心逻辑的代码，不是renderRootConcurrent的完整源码
function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
	// 保存当前的执行上下文和 dispatcher
	const prevExecutionContext = executionContext;
  executionContext |= RenderContext;
  const prevDispatcher = pushDispatcher(root.containerInfo);
  const prevCacheDispatcher = pushCacheDispatcher();
 
	if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
		// 如果当前的工作进度树与传入的 root 或 lanes 不匹配，我们需要为新的渲染任务准备一个新的堆栈。
		// ……
	}
 
	// 持续的工作循环，除非中断发生，否则会一直尝试完成渲染工作
	outer: do {
    try {
      if (
        workInProgressSuspendedReason !== NotSuspended &&
        workInProgress !== null
      ) {
        // 如果当前的工作进度是由于某种原因而被挂起的，并且仍然有工作待处理，那么会处理它
        const unitOfWork = workInProgress;
        const thrownValue = workInProgressThrownValue;
 
				 // 根据不同挂起原因，进行中断、恢复等计算
        resumeOrUnwind: switch (workInProgressSuspendedReason) {
          case SuspendedOnError: {
            // 如果工作因错误被挂起，那么工作会被中断，并从最后一个已知的稳定点继续
						 // ……省略逻辑
            break;
          }
          case SuspendedOnData: {
            // 工作因等待数据（通常是一个异步请求的结果）而被挂起，
						 // ……省略逻辑
            break outer;
          }
					 case SuspendedOnInstance: {
						 // 将挂起的原因更新为SuspendedOnInstanceAndReadyToContinue并中断工作循环，标记为稍后准备好继续执行
            workInProgressSuspendedReason =
              SuspendedOnInstanceAndReadyToContinue;
            break outer;
          }
          case SuspendedAndReadyToContinue: {
						 // 表示之前的挂起工作现在已经准备好继续执行
							 if (isThenableResolved(thenable)) {
              // 如果已解析，这意味着需要的数据现在已经可用
              workInProgressSuspendedReason = NotSuspended;
              workInProgressThrownValue = null;
              replaySuspendedUnitOfWork(unitOfWork); // 恢复执行被挂起的工作
            } else {
              workInProgressSuspendedReason = NotSuspended;
              workInProgressThrownValue = null;
              throwAndUnwindWorkLoop(unitOfWork, thrownValue); // 继续循环
            }
            break;
          }
  				 case SuspendedOnInstanceAndReadyToContinue: {
						 // ……省略部分逻辑
						 const isReady = preloadInstance(type, props);
						 if (isReady) {
							  // 实例已经准备好
              workInProgressSuspendedReason = NotSuspended; // 该fiber已完成，不需要再挂起
              workInProgressThrownValue = null;
              const sibling = hostFiber.sibling;
              if (sibling !== null) {
                workInProgress = sibling; // 有兄弟节点，开始处理兄弟节点
              } else {
									// 没有兄弟节点，回到父节点
                const returnFiber = hostFiber.return;
                if (returnFiber !== null) {
                  workInProgress = returnFiber;
                  completeUnitOfWork(returnFiber); // 收集副作用，前面有详细介绍
                } else {
                  workInProgress = null;
                }
              }
              break resumeOrUnwind;
            }
					 }
					 // 还有其它case
        }
      }
 
      workLoopConcurrent(); // 如果没有任何工作被挂起，那么就会继续处理工作循环。
      break;
    } catch (thrownValue) {
      handleThrow(root, thrownValue);
    }
  } while (true);
 
	// 重置了之前保存的执行上下文和dispatcher，确保后续的代码不会受到这个函数的影响
  resetContextDependencies();
	popDispatcher(prevDispatcher);
  popCacheDispatcher(prevCacheDispatcher);
  executionContext = prevExecutionContext;
 
	// 检查调和是否已完成
	if (workInProgress !== null) {
		// 未完成
		return RootInProgress; // 返回一个状态值，表示还有未完成
	} else {
		// 已完成
		workInProgressRoot = null; // 重置root
    workInProgressRootRenderLanes = NoLanes; // 重置Lane
    finishQueueingConcurrentUpdates(); // 处理队列中的并发更新
    return workInProgressRootExitStatus; // 返回当前渲染root的最终退出状态
	}
}

// packages/react-reconciler/src/ReactFiberCommitWork.js
// 以下只是核心逻辑的代码，不是commitBeforeMutationEffects的完整源码
export function commitBeforeMutationEffects(
  root: FiberRoot,
  firstChild: Fiber,
): boolean {
  nextEffect = firstChild; // nextEffect是遍历此链表时的当前fiber
  commitBeforeMutationEffects_begin(); // 遍历fiber，处理节点删除和确认节点在before mutation阶段是否有要处理的副作用
 
  const shouldFire = shouldFireAfterActiveInstanceBlur; // 当一个焦点元素被删除或隐藏时，它会被设置为 true
  shouldFireAfterActiveInstanceBlur = false;
  focusedInstanceHandle = null;
 
  return shouldFire;
}

// packages/react-reconciler/src/ReactFiberCommitWork.js
// 以下只是核心逻辑的代码，不是commitMutationEffects的完整源码
export function commitMutationEffects(
  root: FiberRoot,
  finishedWork: Fiber,
  committedLanes: Lanes,
) {
	// lanes和root被设置为"in progress"状态，表示它们正在被处理
  inProgressLanes = committedLanes;
  inProgressRoot = root;
 
	// 递归遍历Fiber，更新副作用节点
  commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
 
	// 重置进行中的lanes和root
  inProgressLanes = null;
  inProgressRoot = null;
}

// packages/react-reconciler/src/ReactFiberCommitWork.js
export function commitLayoutEffects(
  finishedWork: Fiber,
  root: FiberRoot,
  committedLanes: Lanes,
): void {
  inProgressLanes = committedLanes;
  inProgressRoot = root;
 
	// 创建一个current指向就Fiber树的alternate
  const current = finishedWork.alternate;
	// 处理那些由useLayoutEffect创建的layout effects
  commitLayoutEffectOnFiber(root, current, finishedWork, committedLanes);
 
  inProgressLanes = null;
  inProgressRoot = null;
}