Question

这里简称 WIP 好了，与之对应的是 current ， current 代表的是当前页面上呈现的组件对应的 fiber 节点，你可以将其类比为 git 中的 master 分支，它代表的是已经对外的状态。而 WIP 则代表了一个 pending 的状态，也就是下一帧屏幕将要呈现的状态，就像是从 master 拉出来的一个 feature 分支，我们可以在这个分支上做任意的更改。最终协调完毕，将 WIP 的结果渲染到了页面上，按照页面内容对应 current 的原则， current 将会指向 WIP ，也就是说， WIP 取代了之前的 current （ git 的 master 分支）。

在这之前 current 和 WIP 的 alternate 字段分别指向彼此。

那么 WIP 是如何被创造出来的呢：

// 根据已有 fiber 生成一个 workInProgress 节点
export function createWorkInProgress (
  current: Fiber,
  pendingProps: any,
  expirationTime
): Fiber {
  let workInProgress = current.alternate
  if (workInProgress === null) {
    // 如果当前 fiber 没有 alternate
    // tip: 这里使用的是“双缓冲池技术”，因为我们最多需要一棵树的两个实例。
    // tip: 我们可以自由的复用未使用的节点
    // tip: 这是异步创建的，避免使用额外的对象
    // tip: 这同样支持我们释放额外的内存（如果需要的话
    workInProgress = createFiber(
      current.tag,
      pendingProps,
      current.key,
      current.mode
    )
    workInProgress.elementType = current.elementType
    workInProgress.type = current.type
    workInProgress.stateNode = current.stateNode

    workInProgress.alternate = current
    current.alternate = workInProgress
  } else {
    // 我们已经有了一个 WIP
    workInProgress.pendingProps = pendingProps

    // 重置 effectTag
    workInProgress.effectTag = EffectTag.NoEffect

    // 重置 effect 链表
    workInProgress.nextEffect = null
    workInProgress.firstEffect = null
    workInProgress.lastEffect = null
  }

可以看出 WIP 其实就是继承了 current 的核心属性，但是去除了一些副作用和工作记录的 干净 的 fiber。