React fiber原理解析及自定义实现

Posted carry

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React fiber原理解析及自定义实现相关的知识，希望对你有一定的参考价值。

概述

React 16 之前的版本比对更新 VirtualDOM 的过程是采用循环加递归实现的，这种比对方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中组件数量庞大，主线程被长期占用，直到整棵 VirtualDOM 树比对更新完成之后主线程才能被释放，主线程才能执行其他任务。这就会导致一些用户交互，动画等任务无法立即得到执行，页面就会产生卡顿, 非常的影响用户体验。

Fiber就是React提出的用于解决页面卡顿的方案，包含如下三个方面：

  1. 利用浏览器的空闲时间执行任务，不会长时间占用主线程。
  2. 因为利用了空闲时间执行任务，所以任务需要可以被随时中断，而迭代是无法中断的，循环是随时可以中断的，因此用循环替代迭代。
  3. 将对比更新操作拆分成一个个小的任务。

核心API

requestIdleCallback 是浏览器提供的API，其利用浏览器的空闲时间执行任务，如果有更高优先级的任务需要执行时，当前执行的任务可会被终止，优先执行更高优先级的任务。

requestIdleCallback接受一个函数作为参数，该函数是要执行的任务：

requestIdleCallback(function(deadline) {
  // deadline.timeRemaining() 获取浏览器的空余时间
})

API示例

在下面的html实例中，页面上包含两个按钮，点击第一个按钮执行一段耗时操作，点击另一个按钮alert显示一段内容：

<!DOCTYPE html>
<html>

<head>
    <meta charset=\'utf-8\'>
    <meta http-equiv=\'X-UA-Compatible\' content=\'IE=edge\'>
    <title>Page Title</title>
    <meta name=\'viewport\' content=\'width=device-width, initial-scale=1\'>
</head>

<body>
    <button id="work">long time work</button>
    <button id="interaction">another work</button>
</body>
<script>
    var workBtn = document.getElementById("work")
    var interactionBtn = document.getElementById("interaction")
    var iterationCount = 100000000
    var value = 0

    // 模拟一段耗时操作
    workBtn.addEventListener("click", function () {
        while (iterationCount > 0) {
            value =
                Math.random() < 0.5 ? value + Math.random() : value + Math.random()
            iterationCount = iterationCount - 1
        }
    })

    interactionBtn.addEventListener("click", function () {
        alert(\'done another work\')
    })
</script>

</html>

当点击第一个按钮之后迅速点击第二个按钮，会发现页面会卡顿一段时间之后才执行alert。

当用requestIdleCallback API改造之后：

<!DOCTYPE html>
<html>

<head>
    <meta charset=\'utf-8\'>
    <meta http-equiv=\'X-UA-Compatible\' content=\'IE=edge\'>
    <title>Page Title</title>
    <meta name=\'viewport\' content=\'width=device-width, initial-scale=1\'>
</head>

<body>
    <button id="work">long time work</button>
    <button id="interaction">another work</button>
</body>
<script>
    var workBtn = document.getElementById("work")
    var interactionBtn = document.getElementById("interaction")
    var iterationCount = 100000000
    var value = 0

    // 模拟一段耗时操作
    var expensiveCalculation = function (IdleDeadline) {
        // 空闲时间超过1秒才执行
        while (iterationCount > 0 && IdleDeadline.timeRemaining() > 1) {
            value =
                Math.random() < 0.5 ? value + Math.random() : value + Math.random()
            iterationCount = iterationCount - 1
        }
        requestIdleCallback(expensiveCalculation)
    }

    workBtn.addEventListener("click", function () {
        requestIdleCallback(expensiveCalculation)
    })

    interactionBtn.addEventListener("click", function () {
        alert(\'done another work\')
    })
</script>

</html>

再次快速点击第一个按钮和第二个按钮，会发现，页面迅速alert一段信息，说明第一个任务并没有阻塞第二个任务。

思路

Fiber将Dom对比算法分解成两步：

  1. 构建Fiber对象（可理解成一个个小的任务对象），这个过程可以随时被中断。
  2. 提交：将Fiber对象渲染成真实Dom，这个过程是不可以被中断的。

Fiber对象

为了能够模拟实现整个Fiber的核心代码，需要首先了解Fiber对象的结构，Fiber对象是一个普通的js对象，其包含如下属性：

属性名说明
type节点类型，和虚拟Dom对象的type相同，用于区分元素、文本、组件
props节点属性，同虚拟Dom对象
stateNode节点Dom对象或者组件实例
tag标记，用于标记节点
effects存储包含自身和所有后代的Fiber数组
effectTag标记当前节点需要进行的操作，包含插入、更新、移除等
parent父Fiber对象，在React源码中叫Return
child当前Fiber对象的子级Fiber对象
sibling当前Fiber对象的下一级兄弟节点
alternateFiber对象备份，用于对比

最终虚拟Dom树会被转换成Fiber对象的树形结构数据，最顶层的节点effects属性中包含了该树结构所有的Fiber对象，其是一个数组，也就是前文说的能被中断的一个个小任务的任务操作对象。

模拟任务队列

本节将模拟实现一个任务队列，该任务队列将为后续Fiber执行提供基础，当浏览器有空闲时间时，会不断的从任务队列中取出任务并执行。

任务队列：

const createTaskQueue = () => {
  const taskQueue = []
  return {
    /**
     * 向任务队列中添加任务
     */
    push: item => taskQueue.push(item),
    /**
     * 从任务队列中获取任务
     */
    pop: () => taskQueue.shift(),
    /**
     * 判断任务队列中是否还有任务
     */
    isEmpty: () => taskQueue.length === 0
  }
}

export default createTaskQueue

实现空闲时间任务调度

render方法是节点挂载的入口方法，当调用render的时候，会执行首次渲染或者对比更新，因此需要修改render方法。利用浏览器提供的api实现空闲执行。

// 创建任务队列
const taskQueue = createTaskQueue()

// 空闲时间执行的具体方法
const performTask = deadline => {
  // 执行任务，workLoop方法后续补充
  workLoop(deadline)
  // 实现持续调用
  if (subTask || !taskQueue.isEmpty()) {
    requestIdleCallback(performTask)
  }
}

// 暴露的render方法
export const render = (element, dom) => {
  // 1. 添加任务 =》 构建fiber对象
  taskQueue.push({
    dom,
    props: { children: element }
  })
  // 2. 指定浏览器空闲时间执行performTask 方法
  requestIdleCallback(performTask)
}

以上是关于React fiber原理解析及自定义实现的主要内容，如果未能解决你的问题，请参考以下文章

React fiber原理解析及自定义实现

手写React的Fiber架构，深入理解其原理

React Fiber架构原理

推荐手写React的Fiber架构，深入理解其原理

MyBatis插件原理解析及自定义插件实践

MyBatis插件原理解析及自定义插件实践