/** @noinline */
function workLoopConcurrent() {
  // Perform work until Scheduler asks us to yield
  while (workInProgress !== null && !shouldYield()) {
    workInProgress = performUnitOfWork(workInProgress);
  }
}
 

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  /* 作为静态数据结构的属性 */
  /* Fiber对应组件的类型 Function/Class/Host... */
  this.tag = tag;
  // key属性
  this.key = key;
  /* 大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹 */
  this.elementType = null;
  /* 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName */
  this.type = null;
  /* Fiber对应的真实DOM节点 */
  this.stateNode = null;
 
  /* 用于连接其他Fiber节点形成Fiber树 */
  /* 父节点 */
  this.return = null;
  /* 子节点 */
  this.child = null;
  /* 右边的兄弟节点 */
  this.sibling = null;
  this.index = 0;
 
  this.ref = null;
 
  /* 作为动态的工作单元的属性 */
  /* 保存本次更新造成的状态改变相关信息 */
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;
 
  this.mode = mode;
 
  /* 保存本次更新会造成的DOM操作 */
  this.effectTag = NoEffect;
  this.nextEffect = null;
 
  this.firstEffect = null;
  this.lastEffect = null;
 
  /* 调度优先级相关 */
  this.lanes = NoLanes;
  this.childLanes = NoLanes;
 
  /* 指向该fiber在另一次更新时对应的fiber - 「双指针」 */
  /* alternate 属性的主要作用是连接当前树和工作树，支持双缓存、节点复用以及状态和副作用的传递，从而提升 React 的渲染性能。 */
  this.alternate = null;
 
  /**
   * 当前fiber & 缓存中的fiber
   * currentFiber.alternate === workInProgressFiber;
   * workInProgressFiber.alternate === currentFiber;
   **/
}

/* 父节点 */
this.return = null;
/* 子节点 */
this.child = null;
/* 右边的兄弟节点 */
this.sibling = null;

// performSyncWorkOnRoot会调用该方法
function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}
 
// performConcurrentWorkOnRoot会调用该方法
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

function App() {
  return (
    <div>
      i am
      <span>KaSong</span>
    </div>
  );
}
 
ReactDOM.render(<App />, document.getElementById("root"));

1. rootFiber beginWork
2. App Fiber beginWork
3. div Fiber beginWork
4. "i am" Fiber beginWork
5. "i am" Fiber completeWork
6. span Fiber beginWork
7. span Fiber completeWork
8. div Fiber completeWork
9. App Fiber completeWork
10. rootFiber completeWork

function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes
): Fiber | null {
  if (current !== null) {
    /* update 更新 */
    /* update时：如果current存在可能存在优化路径，可以复用current（即上一次更新的Fiber节点） */
    // ...省略
 
    // 复用current
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  } else {
    /* mount 首次挂载 */
    didReceiveUpdate = false;
  }
 
  /* mount时：根据tag不同，创建不同的子Fiber节点 */
  switch (workInProgress.tag) {
    case IndeterminateComponent:
    // ...省略
    case LazyComponent:
    // ...省略
    case FunctionComponent:
    // ...省略
    case ClassComponent:
    // ...省略
    case HostRoot:
    // ...省略
    case HostComponent:
    // ...省略
    case HostText:
    // ...省略
    // ...省略其他类型
  }
}