虚拟DOM、Diff算法、fiber

前情提要

首先先明白一个问题，引入虚拟DOM最主要就是解决性能问题。

早期的时候我们使用document.getElementById或者jquery来进行dom操作

$('#count').text(1);
$('#count').text(2);
$('#count').text(3);
$('#count').text(4);

但这样会导致浏览器触发多次页面更新，也就是浏览器渲染多次。

因此我们需要引入虚拟dom来解决问题，所以有了react，但是react也主要分为两个时期，v16.8之前，和v16.8之后（加入fiber）

react 16.8之前

这个时期的react已经较真实dom操作而言，优化了很大性能

虚拟dom的本质就是一个轻量级的JS对象，伪代码如下：

{
  type: 'div',
  props: {
    className: 'box',
    children: 'hello'
  }
}

对比虚拟dom而言，真实dom就会显得非常笨重，你可以使用以下命令打印出来看看真实dom内容有多复杂：

console.dir(object)

那么react的核心，就在于他使用diff算法来进行两个虚拟dom之间的对比，仅使用O(n)复杂度就解决了网页重新渲染问题。

diff算法

简单说一下diff算法的原理，假设客厅的所有家具中，有一个红色的沙发需要变成蓝色沙发，使用dom操作就会把你整个房子家具全部换一遍。但react只需要对比设计图，发现沙发颜色变了，那就仅仅换沙发就可以。

因此可以得出react页面渲染流程大致如下：

1. 组件发生改动时，生成一个新的虚拟dom树
2. react会拿新树和旧树去做一个对比（DIFF算法）
3. 运算完后，一次性去渲染整个页面

react 16.8之后（fiber加入）

这又是一伟大变革，fiber可以简单理解为一种新的数据结构，这使得生硬的diff算法流程可以灵活使用，假设diff算法计算到有1000个组件需要进行渲染，那么以前的diff是一次性的，加入fiber之后，每个组件都会变成一个fiber结构。

现在：

处理一个Fiber

↓

检查时间

↓

还有时间继续

↓

没时间暂停

这使得页面不会因为diff算法的处理而有明显卡顿。