React Fiber 分享

export type ReactElement = {
  $$typeof: any
  type: any
  key: any
  ref: any
  props: any
  _owner: ReactInstance
}

[object CompositeComponent] {
  currentElement: <App />,
  publicInstance: [ object App],
  renderedComponent: [object CompositeComponent] {
    currentElement: <Main />,
    publicInstance: null,
    renderedComponent: [object DOMComponent] {
      currentElement: <div />,
      node: [object HTMLDivElement],
      renderedChildren: {
        '.0' : [object DOMComponent] {
          currentElement: <button />,
          node: [ object HTMLButtonElement],
          renderedChildren: null
        },
        '.1' : [object DOMComponent] {
          currentElement: <span />,
          node: [ object HTMLSpanElement],
          renderedChildren: null
        }
      }
    }
  }
}

// 我们忽略其他参数
// nextElement 就是更新的element对象，它是通过render生成的。
function receiveComponent(nextElement: ReactElement): void

class InternalComponent {
  receiveComponent(nextElement) {
    var prevElement = this._currentElement

    this.updateComponent(prevElement, nextElement)
  }
  updateComponent(prevParentElement, nextParentElement) {
    // 更新当前节点的props和state
    var prevProps = prevParentElement.props
    var nextProps = nextParentElement.props
    var nextState = this._processPendingState(nextProps, nextContext)
    this._publicInstance.props = nextProps
    this._publicInstance.state = nextState

    // 更新子节点
    var prevComponentInstance = this._renderedComponent
    // 上次render出来的element
    var prevRenderedElement = prevComponentInstance._currentElement
    // 调用component 的 render，获取新的element
    var nextRenderedElement = this._publicInstance.render()
    // 判断是否是仅仅需要更新子节点
    if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
      // 子节点，递归调用receiveComponent
      prevComponentInstance.receiveComponent(nextRenderedElement)
    } else {
      // 否则，卸载旧的子节点，然后走新建子节点流程
    }
  }
}

[object FiberNode] {
  type: App,
  stateNode: [ object App],
  return: [ object FiberNode],
  sibling: null,
  child: [object FiberNode] {
    type: Main,
    stateNode: null,
    return: [ object FiberNode],
    sibling: null,
    child: [object FiberNode] {
      type: "div",
      stateNode: [object DOMComponent],
      return: [ object FiberNode],
      sibling: null,
      child: [object FiberNode] {
        type: "button",
        stateNode: [object HTMLButtonElement],
        return: [ object FiberNode],
        sibling: [object FiberNode] {
          type: "span",
          stateNode: [object HTMLSpanElement],
          return: [ object FiberNode],
          sibling: null,
          child: null
        },
      }
    }
  }
}

// concurrent 模式下，构建 workInProgress tree
function workLoopConcurrent() {
  // Perform work until Scheduler asks us to yield
  while (workInProgress !== null && !shouldYield()) {
    workInProgress = performUnitOfWork(workInProgress)
  }
}

// sync 模式下，构建 workInProgress tree
function workLoopSync() {
  // Already timed out, so perform work without checking if we need to yield.
  while (workInProgress !== null) {
    workInProgress = performUnitOfWork(workInProgress)
  }
}

function performUnitOfWork(unitOfWork) {
  // 获取WIP node 对应的current node
  const current = unitOfWork.alternate

  // 调用beginWork，对当前 node 处理，得到 child | null
  // 如果 next 为 null，则表明遍历到最底部了，没有子节点了
  let next = beginWork(current, unitOfWork)
  if (next === null) {
    // 如果没有child了，就开始 complete 当前 node
    // 此时，unitOfWork就是 child，如果当前 node 有 sibling，则返回 sibling，
    next = completeUnitOfWork(unitOfWork)
  }
  return next
}

function beginWork(current, workInProgress) {
  // statNode会存component instance 或者 dom node
  const instance = workInProgress.stateNode

  // 这里只是列举了class component情况，注意如果是function component会有不同处理
  const nextChildren = instance.render()

  // 这里会根据render出来的element去创建Fiber，
  // 有其他逻辑，比如根据key来处理，
  if (current === null) {
    workInProgress.child = mountChildFibers(workInProgress, null, nextChildren)
  } else {
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren
    )
  }
  // 返回child fiber
  return workInProgress.child
}

function completeUnitOfWork(unitOfWork) {
  // 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.
  workInProgress = unitOfWork
  do {
    const current = workInProgress.alternate
    const returnFiber = workInProgress.return

    //complete task
    completeWork(current, workInProgress)

    //这里省略了effectNext的生成过程
    // 。。。

    const siblingFiber = workInProgress.sibling
    if (siblingFiber !== null) {
      // If there is more work to do in this returnFiber, do that next.
      return siblingFiber
    }
    // Otherwise, return to the parent
    workInProgress = returnFiber
  } while (workInProgress !== null)

  // We've reached the root.
  if (workInProgressRootExitStatus === RootIncomplete) {
    workInProgressRootExitStatus = RootCompleted
  }
  return null
}

beginWork App -> beginWork Main -> beginWork div -> beginWork button ->  completeWork button
																																								    |
																																								    v
completeWork App <-	completeWork Main <- completeWork div	<- completeWork span <-	beginWork span

const effectTag = workInProgress.effectTag

// Skip both NoWork and PerformedWork tags when creating the effect
// list. PerformedWork effect is read by React DevTools but shouldn't be
// committed.
if (effectTag > PerformedWork) {
  if (returnFiber.lastEffect !== null) {
    returnFiber.lastEffect.nextEffect = workInProgress
  } else {
    returnFiber.firstEffect = workInProgress
  }
  returnFiber.lastEffect = workInProgress
}

function commitRoot(root) {
  // finishedWork 就是 WIP tree
  const finishedWork = root.finishedWork
  root.finishedWork = null

  // Get the list of effects.
  // 从RootFiber的firstEffect开始
  let firstEffect = finishedWork.firstEffect || finishedWork

  if (firstEffect !== null) {
    // The first phase a "before mutation" phase. We use this phase to read the
    // state of the host tree right before we mutate it. This is where
    // getSnapshotBeforeUpdate is called.
    commitBeforeMutationEffects()

    // The next phase is the mutation phase, where we mutate the host tree.
    // 包括 Placement | Update | Deletion | Hydrating
    // componentWillUnmount,
    commitMutationEffects(root)

    // The work-in-progress tree is now the current tree. This must come after
    // the mutation phase, so that the previous tree is still current during
    // componentWillUnmount, but before the layout phase, so that the finished
    // work is current during componentDidMount/Update.
    root.current = finishedWork

    // The next phase is the layout phase, where we call effects that read
    // the host tree after it's been mutated. The idiomatic use case for this is
    // layout, but class component lifecycles also fire here for legacy reasons.
    // componentDidMount/componentDidUpdate.
    commitLayoutEffects(root, expirationTime)
  } else {
    // No effects.
    root.current = finishedWork
  }
}

// 遍历 nextEffect 链表
function executeEffect() {
  while (nextEffect !== null) {
    const effectTag = nextEffect.effectTag
    // 根据effectTag 做一些事情
    // 。。。
    nextEffect = nextEffect.nextEffect
  }
}