关于前端:React-架构的演变-从递归到循环

这篇文章是 React 架构演变的第二篇，上一篇次要介绍了更新机制从同步批改为异步，这一篇重点介绍 Fiber 架构下通过循环遍历更新的过程，之所以要应用循环遍历的形式，是因为递归更新过程一旦开始就不能暂停，只能一直向下，直到递归完结或者出现异常。

React 15 的递归更新逻辑是先将须要更新的组件放入脏组件队列（这里在上篇文章曾经介绍过，没看过的能够先看看《React 架构的演变 – 从同步到异步》），而后取出组件进行一次递归，不停向下寻找子节点来查找是否须要更新。

上面应用一段代码来简略形容一下这个过程：

updateComponent (prevElement, nextElement) {
  if (
        // 如果组件的 type 和 key 都没有发生变化，进行更新
    prevElement.type === nextElement.type &&
    prevElement.key === nextElement.key
  ) {
    // 文本节点更新
    if (prevElement.type === 'text') {if (prevElement.value !== nextElement.value) {this.replaceText(nextElement.value)
        }
    }
    // DOM 节点的更新
    else {
      // 先更新 DOM 属性
      this.updateProps(prevElement, nextElement)
      // 再更新 children
      this.updateChildren(prevElement, nextElement)
    }
  }
  // 如果组件的 type 和 key 发生变化，间接从新渲染组件
  else {
    // 触发 unmount 生命周期
    ReactReconciler.unmountComponent(prevElement)
    // 渲染新的组件
    this._instantiateReactComponent(nextElement)
  }
},
updateChildren (prevElement, nextElement) {
  var prevChildren = prevElement.children
  var nextChildren = nextElement.children
  // 省略通过 key 从新排序的 diff 过程
  if (prevChildren === null) { } // 渲染新的子节点
  if (nextChildren === null) { } // 清空所有子节点
  // 子节点比照
  prevChildren.forEach((prevChild, index) => {const nextChild = nextChildren[index]
    // 递归过程
    this.updateComponent(prevChild, nextChild)
  })
}

为了更清晰的看到这个过程，咱们还是写一个简略的 Demo，结构一个 3 * 3 的 Table 组件。

// https://codesandbox.io/embed/react-sync-demo-nlijf
class Col extends React.Component {render() {
    // 渲染之前暂停 8ms，给 render 制作一点点压力
    const start = performance.now()
    while (performance.now() - start < 8)
    return <td>{this.props.children}</td>
  }
}

export default class Demo extends React.Component {
  state = {val: 0}
  render() {const { val} = this.state
    const array = Array(3).fill()
    // 结构一个 3 * 3 表格
    const rows = array.map((_, row) => <tr key={row}>
        {array.map((_, col) => <Col key={col}>{val}</Col>
        )}
      </tr>
    )
    return (
      <table className="table">
        <tbody>{rows}</tbody>
      </table>
    )
  }
}

而后每秒对 Table 外面的值更新一次，让 val 每次 + 1，从 0 ~ 9 不停循环。

// https://codesandbox.io/embed/react-sync-demo-nlijf
export default class Demo extends React.Component {tick = () => {setTimeout(() => {this.setState({ val: next < 10 ? next : 0})
      this.tick()}, 1000)
  }
  componentDidMount() {this.tick()
  }
}

残缺代码的线上地址：https://codesandbox.io/embed/react-sync-demo-nlijf。Demo 组件每次调用 setState，React 会先判断该组件的类型有没有产生批改，如果有就整个组件进行从新渲染，如果没有会更新 state，而后向下判断 table 组件，table 组件持续向下判断 tr 组件，tr 组件再向下判断 td 组件，最初发现 td 组件下的文本节点产生了批改，通过 DOM API 更新。

通过 Performance 的函数调用堆栈也能清晰的看到这个过程，updateComponent 之后的 updateChildren 会持续调用子组件的 updateComponent，直到递归完所有组件，示意更新实现。

递归的毛病很显著，不能暂停更新，一旦开始必须从头到尾，这与 React 16 拆分工夫片，给浏览器喘口气的理念显著不符，所以 React 必须要切换架构，将虚构 DOM 从树形构造批改为链表构造。

这里说的链表构造就是 Fiber 了，链表构造最大的劣势就是能够通过循环的形式来遍历，只有记住以后遍历的地位，即便中断后也能疾速还原，从新开始遍历。

咱们先看看一个 Fiber 节点的数据结构：

function FiberNode (tag, key) {
  // 节点 key，次要用于了优化列表 diff
  this.key = key
  // 节点类型；FunctionComponent: 0, ClassComponent: 1, HostRoot: 3 ...
  this.tag = tag

    // 子节点
  this.child = null
  // 父节点
  this.return = null 
  // 兄弟节点
  this.sibling = null
  
  // 更新队列，用于暂存 setState 的值
  this.updateQueue = null
  
  // 节点更新过期工夫，用于工夫分片
  // react 17 改为：lanes、childLanes
  this.expirationTime = NoLanes
  this.childExpirationTime = NoLanes

  // 对应到页面的实在 DOM 节点
  this.stateNode = null
  // Fiber 节点的正本，能够了解为备胎，次要用于晋升更新的性能
  this.alternate = null
}

上面举个例子，咱们这里有一段一般的 HTML 文本：

<table class="table">
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
</table>

在之前的 React 版本中，jsx 会转化为 createElement 办法，创立树形构造的虚构 DOM。

const VDOMRoot = {
  type: 'table',
  props: {className: 'table'},
  children: [
    {
      type: 'tr',
      props: { },
      children: [
        {
          type: 'td',
          props: { },
          children: [{type: 'text', value: '1'}]
        },
        {
          type: 'td',
          props: { },
          children: [{type: 'text', value: '1'}]
        }
      ]
    },
    {
      type: 'tr',
      props: { },
      children: [
        {
          type: 'td',
          props: { },
          children: [{type: 'text', value: '1'}]
        }
      ]
    }
  ]
}

Fiber 架构下，构造如下：

// 有所简化，并非与 React 实在的 Fiber 构造统一
const FiberRoot = {
  type: 'table',
  return: null,
  sibling: null,
  child: {
    type: 'tr',
    return: FiberNode, // table 的 FiberNode
    sibling: {
      type: 'tr',
      return: FiberNode, // table 的 FiberNode
      sibling: null,
      child: {
        type: 'td',
        return: FiberNode, // tr 的 FiberNode
        sibling: {
          type: 'td',
          return: FiberNode, // tr 的 FiberNode
          sibling: null,
          child: null,
          text: '1' // 子节点仅有文本节点
        },
        child: null,
        text: '1' // 子节点仅有文本节点
      }
    },
    child: {
      type: 'td',
      return: FiberNode, // tr 的 FiberNode
      sibling: null,
      child: null,
      text: '1' // 子节点仅有文本节点
    }
  }
}

那么，在 setState 的时候，React 是如何进行一次 Fiber 的遍历的呢？

let workInProgress = FiberRoot

// 遍历 Fiber 节点，如果工夫片工夫用完就进行遍历
function workLoopConcurrent() {
  while (
    workInProgress !== null &&
    !shouldYield() // 用于判断以后工夫片是否到期) {performUnitOfWork(workInProgress)
  }
}

function performUnitOfWork() {const next = beginWork(workInProgress) // 返回以后 Fiber 的 child
  if (next) { // child 存在
    // 重置 workInProgress 为 child
    workInProgress = next
  } else { // child 不存在
    // 向上回溯节点
    let completedWork = workInProgress
    while (completedWork !== null) {
      // 收集副作用，次要是用于标记节点是否须要操作 DOM
      completeWork(completedWork)

      // 获取 Fiber.sibling
      let siblingFiber = workInProgress.sibling
      if (siblingFiber) {
        // sibling 存在，则跳出 complete 流程，持续 beginWork
        workInProgress = siblingFiber
        return;
      }

      completedWork = completedWork.return
      workInProgress = completedWork
    }
  }
}

function beginWork(workInProgress) {
  // 调用 render 办法，创立子 Fiber，进行 diff
  // 操作结束后，返回以后 Fiber 的 child
  return workInProgress.child
}
function completeWork(workInProgress) {// 收集节点副作用}

Fiber 的遍历实质上就是一个循环，全局有一个 workInProgress 变量，用来存储以后正在 diff 的节点，先通过 beginWork 办法对以后节点而后进行 diff 操作（diff 之前会调用 render，从新计算 state、prop），并返回以后节点的第一个子节点 (fiber.child) 作为新的工作节点，直到不存在子节点。而后，对以后节点调用 completedWork 办法，存储 beginWork 过程中产生的副作用，如果以后节点存在兄弟节点(fiber.sibling)，则将工作节点批改为兄弟节点，从新进入 beginWork 流程。直到 completedWork 从新返回到根节点，执行 commitRoot 将所有的副作用反馈到实在 DOM 中。

在一次遍历过程中，每个节点都会经验 beginWork、completeWork，直到返回到根节点，最初通过 commitRoot 将所有的更新提交，对于这部分的内容能够看：《React 技术揭秘》。

后面说过，Fiber 构造的遍历是反对中断复原，为了察看这个过程，咱们将之前的 3 * 3 的 Table 组件改成 Concurrent 模式，线上地址：https://codesandbox.io/embed/react-async-demo-h1lbz。因为每次调用 Col 组件的 render 局部须要耗时 8ms，会超出了一个工夫片，所以每个 td 局部都会暂停一次。

class Col extends React.Component {render() {
    // 渲染之前暂停 8ms，给 render 制作一点点压力
    const start = performance.now();
    while (performance.now() - start < 8);
    return <td>{this.props.children}</td>
  }
}

在这个 3 * 3 组件里，一共有 9 个 Col 组件，所以会有 9 次耗时工作，扩散在 9 个工夫片进行，通过 Performance 的调用栈能够看到具体情况：

在非 Concurrent 模式下，Fiber 节点的遍历是一次性进行的，并不会切分多个工夫片，差异就是在遍历的时候调用了 workLoopSync 办法，该办法并不会判断工夫片是否用完。

// 遍历 Fiber 节点
function workLoopSync() {while (workInProgress !== null) {performUnitOfWork(workInProgress)
  }
}

通过下面的剖析能够看出，shouldYield 办法决定了以后工夫片是否曾经用完，这也是决定 React 是同步渲染还是异步渲染的要害。如果去除工作优先级的概念，shouldYield 办法能够说很简略，就是判断了以后的工夫，是否曾经超过了预设的 deadline。

function getCurrentTime() {return performance.now()
}
function shouldYield() {
  // 获取以后工夫
  var currentTime = getCurrentTime()
  return currentTime >= deadline
}

deadline 又是如何得的呢？能够回顾上一篇文章（《React 架构的演变 – 从同步到异步》）提到的 ChannelMessage，更新开始的时候会通过 requestHostCallback（即：port2.send）发送异步音讯，在 performWorkUntilDeadline（即：port1.onmessage）中接管音讯。performWorkUntilDeadline 每次接管到音讯时，示意曾经进入了下一个工作队列，这个时候就会更新 deadline。

var channel = new MessageChannel()
var port = channel.port2
channel.port1.onmessage = function performWorkUntilDeadline() {if (scheduledHostCallback !== null) {var currentTime = getCurrentTime()
    // 重置超时工夫 
    deadline = currentTime + yieldInterval
    
    var hasTimeRemaining = true
    var hasMoreWork = scheduledHostCallback()

    if (!hasMoreWork) {
      // 曾经没有工作了，批改状态 
      isMessageLoopRunning = false;
      scheduledHostCallback = null;
    } else {
      // 还有工作，放到下个工作队列执行，给浏览器喘息的机会 
      port.postMessage (null);
    }
  } else {isMessageLoopRunning = false;}
}

requestHostCallback = function (callback) {
  //callback 挂载到 scheduledHostCallback
  scheduledHostCallback = callback
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true
    // 推送音讯，下个队列队列调用 callback
    port.postMessage (null)
  }
}

超时工夫的设置就是在以后工夫的根底上加上了一个 yieldInterval，这个 yieldInterval 的值，默认是 5ms。

deadline = currentTime + yieldInterval

同时 React 也提供了批改 yieldInterval 的伎俩，通过手动指定 fps，来确定一帧的具体工夫（单位：ms），fps 越高，一个工夫分片的工夫就越短，对设施的性能要求就越高。

forceFrameRate = function (fps) {if (fps < 0 || fps > 125) {
    // 帧率仅反对 0~125
    return
  }

  if (fps > 0) {
    // 个别 60 fps 的设施
    // 一个工夫分片的工夫为 Math.floor(1000/60) = 16
    yieldInterval = Math.floor(1000 / fps)
  } else {
    // reset the framerate
    yieldInterval = 5
  }
}

上面咱们将异步逻辑、循环更新、工夫分片串联起来。先回顾一下之前的文章讲过，Concurrent 模式下，setState 后的调用程序：

Component.setState()
  => enqueueSetState()
    => scheduleUpdate()
  => scheduleCallback(performConcurrentWorkOnRoot)
  => requestHostCallback()
  => postMessage()
  => performWorkUntilDeadline()

scheduleCallback 办法会将传入的回调（performConcurrentWorkOnRoot）组装成一个工作放入 taskQueue 中，而后调用 requestHostCallback 发送一个音讯，进入异步工作。performWorkUntilDeadline 接管到异步音讯，从 taskQueue 取出工作开始执行，这里的工作就是之前传入的 performConcurrentWorkOnRoot 办法，这个办法最初会调用workLoopConcurrent（workLoopConcurrent 后面曾经介绍过了，这个不再反复）。如果 workLoopConcurrent 是因为超时中断的，hasMoreWork 返回为 true，通过 postMessage 发送音讯，将操作提早到下一个工作队列。

到这里整个流程曾经完结，心愿大家看完文章能有所播种，下一篇文章会介绍 Fiber 架构下 Hook 的实现。

关于前端:React-架构的演变-从递归到循环

递归更新的实现

可循环的 Fiber

循环更新的实现

工夫分片的机密

总结

Just My Socks（注册教程内含优惠码）

关于前端:React-架构的演变-从递归到循环

递归更新的实现

可循环的 Fiber

循环更新的实现

工夫分片的机密

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）