React源码解读之React Fiber5

requestIdleCallback((deadline) => {
    while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && nextComponent) {
        nextComponent = performWork(nextComponent);
    }
});

const a1 = {name: 'a1'};
const b1 = {name: 'b1'};
const b2 = {name: 'b2'};
const b3 = {name: 'b3'};
const c1 = {name: 'c1'};
const c2 = {name: 'c2'};
const d1 = {name: 'd1'};
const d2 = {name: 'd2'};

a1.render = () => [b1, b2, b3];
b1.render = () => [];
b2.render = () => [c1];
b3.render = () => [c2];
c1.render = () => [d1, d2];
c2.render = () => [];
d1.render = () => [];
d2.render = () => [];

function walk(instance) {
  console.log(instance.name);
  let children = instance.render();
  children.forEach((child) => {
    walk(child);
  });
}
walk(a1);

let root = fiber;
let node = fiber;
while (true) {
  if (node.child) {
    node = node.child;
    continue;
  }
  if (node === root) {
    return;
  }
  while (!node.sibling) {
    if (!node.return || node.return === root) {
      return;
    }
    node = node.return;
  }
  node = node.sibling;
}

function FiberNode(
  tag: WorkTag,  pendingProps: mixed,  key: null | string,  mode: TypeOfMode
) {
  // Instance
  this.tag = tag; //Fiber标记是什么类型的Fiber/component，WorkTag 0-24
  this.key = key; // 唯一标识
  this.elementType = null;
  this.type = null;
  this.stateNode = null; //stateNode：class div

  // Fiber 数据结构
  this.return = null; // 父节点
  this.child = null; // 第一个子节点
  this.sibling = null; // 兄弟节点
  this.index = 0; //

  this.ref = null;

  this.pendingProps = pendingProps; //newprops
  this.memoizedProps = null; // oldProps 上次的props
  // updateQueue数据结构：
  //  {
  //   baseState: fiber.memoizedState,
  //   firstBaseUpdate: null,
  //   lastBaseUpdate: null,
  //   shared: {
  //     pending: null,
  //     interleaved: null,
  //     lanes: NoLanes,
  //   },
  //   effects: null,
  // };
  this.updateQueue = null; // 批处理队列

  this.memoizedState = null; //oldState
  this.dependencies = null;

  this.mode = mode;

  // Effects
  this.flags = NoFlags; // 标记该fiber变更方式
  this.subtreeFlags = NoFlags;
  this.deletions = null;
  // 优先级调度
  this.lanes = NoLanes; 
  this.childLanes = NoLanes;

  this.alternate = null; //work-in-progress current互为alternate
}

// https://github.com/facebook/react/blob/v17.0.2/packages/react-reconciler/src/ReactFiberWorkLoop.old.js#L1635
function workLoopConcurrent() {
  // Perform work until Scheduler asks us to yield
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

// https://github.com/facebook/react/blob/v17.0.2/packages/react-reconciler/src/ReactFiberWorkLoop.old.js#L1642
function performUnitOfWork(unitOfWork: Fiber): void {
  const current = unitOfWork.alternate;
  let next;
  // 一直返回unitOfWork.child，不会处理sibling
    next = beginWork(current, unitOfWork, subtreeRenderLanes);
  unitOfWork.memoizedProps = unitOfWork.pendingProps;
  // 该fiber需要做的处理完成，返回下一个待处理的fiber
  if (next === null) {
    // 到达该链路的最底层的叶子节点，在该函数中处理sibling节点
    completeUnitOfWork(unitOfWork);
  } else {
    workInProgress = next;
  }
}

// https://github.com/facebook/react/blob/v17.0.2/packages/react-reconciler/src/ReactFiberBeginWork.old.js#L3083
function beginWork(
  current: Fiber | null,  workInProgress: Fiber,  renderLanes: Lanes
): Fiber | null {
  let updateLanes = workInProgress.lanes;
    // tag有很多，这里只保留了常用的FunctionComponent和ClassComponent，后续只看updateClassComponent
  switch (workInProgress.tag) {
    case FunctionComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes
      );
    }
    case ClassComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      // 返回值为workInProgress.child，可以在finishClassComponent中看到
      return updateClassComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes
      );
    }
  }
}
function updateClassComponent(
  current: Fiber | null,  workInProgress: Fiber,  Component: any,  nextProps: any,  renderLanes: Lanes
) {

  const instance = workInProgress.stateNode;
  let shouldUpdate;
  // 在此阶段处理更新生命周期和批处理的更新，
  if (instance === null) {
    if (current !== null) {
      // A class component without an instance only mounts if it suspended
      // inside a non-concurrent tree, in an inconsistent state. We want to
      // treat it like a new mount, even though an empty version of it already
      // committed. Disconnect the alternate pointers.
      current.alternate = null;
      workInProgress.alternate = null;
      // Since this is conceptually a new fiber, schedule a Placement effect
      workInProgress.flags |= Placement;
    }
    // In the initial pass we might need to construct the instance.
    constructClassInstance(workInProgress, Component, nextProps);
    mountClassInstance(workInProgress, Component, nextProps, renderLanes);
    shouldUpdate = true;
  } else if (current === null) {
    // In a resume, we'll already have an instance we can reuse.
    复用之前未完成
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderLanes
    );
  } else {
    // 在此阶段处理生命周期和批处理的更新
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderLanes
    );
  }
  const nextUnitOfWork = finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderLanes
  );
  return nextUnitOfWork;
}

function finishClassComponent(
  current: Fiber | null,  workInProgress: Fiber,  Component: any,  shouldUpdate: boolean,  hasContext: boolean,  renderLanes: Lanes
) {
  const instance = workInProgress.stateNode;
  // Rerender
  ReactCurrentOwner.current = workInProgress;
  let nextChildren;
    nextChildren = instance.render();
    //初始化或者执行dom diff   //ReactChildFiber.old.js
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);  
  //child
  return workInProgress.child;
}

// https://github.com/facebook/react/blob/v17.0.2/packages/react-reconciler/src/ReactFiberWorkLoop.old.js#L1670
function completeUnitOfWork(unitOfWork: Fiber): void {
  // Attempt to complete the current unit of work, then move to the next
  // sibling. If there are no more siblings, return to the parent fiber.
  let completedWork = unitOfWork;
  do {
    const current = completedWork.alternate;
    const returnFiber = completedWork.return;

    let next;
      // 返回值一直为null
    next = completeWork(current, completedWork, subtreeRenderLanes);
    const siblingFiber = completedWork.sibling;
    if (siblingFiber !== null) {
      // If there is more work to do in this returnFiber, do that next.
      workInProgress = siblingFiber;
      return;
    }
    // Otherwise, return to the parent
    completedWork = returnFiber;
    // Update the next thing we're working on in case something throws.
    workInProgress = completedWork;
  } while (completedWork !== null);
}

// https://github.com/facebook/react/blob/v17.0.2/packages/react-reconciler/src/ReactFiberCompleteWork.old.js#L645
function completeWork(
  current: Fiber | null,  workInProgress: Fiber,  renderLanes: Lanes,
): Fiber | null {
  const newProps = workInProgress.pendingProps;

  switch (workInProgress.tag) {
      case FunctionComponent:
              bubbleProperties(workInProgress);
              return null;
      case ClassComponent: {
          const Component = workInProgress.type;
        if (isLegacyContextProvider(Component)) {
          popLegacyContext(workInProgress);
        }
        bubbleProperties(workInProgress);
        return null;
      }
  }