[第14期] [长文预警] 深入了解React 渲染原理及性能优化

皮小蛋

发布于 2020-03-03 19:21:45

7110

发布于 2020-03-03 19:21:45

文章被收录于专栏：前端皮小蛋

如今的前端，框架横行，出去面试问到框架是常有的事。

我比较常用React，这里就写了一篇 React 基础原理的内容，面试基本上也就问这些，分享给大家。

React 是什么

React是一个专注于构建用户界面的 Javascript Library.

React做了什么？

Virtual Dom模型
生命周期管理
setState机制
Diff算法
React patch、事件系统
React的 Virtual Dom模型

virtual dom 实际上是对实际Dom的一个抽象，是一个js对象。react所有的表层操作实际上是在操作Virtual dom。

经过 Diff 算法会计算出 Virtual DOM 的差异，然后将这些差异进行实际的DOM操作更新页面。

React 总体架构

几点要了解的知识

JSX 如何生成Element
Element 如何生成DOM

JSX 如何生成Element

先看一个例子， Counter :

App.js 就做了一件事情，就是把 Counter 组件挂在 #root 上.

Counter 组件里面定义了自己的 state, 这是个默认的 property ，还有一个 handleclick 事件和一个 render 函数。

看到 render 这个函数里，竟然在 JS 里面写了 html !

这是一种 JSX 语法。React 为了方便 View 层组件化，承载了构建 html 结构化页面的职责。

这里也简单的举个例子：

将 html 语法直接加入到 javascript 代码中，再通过翻译器转换到纯 javascript 后由浏览器执行。

这里调用了 React 和 createElement 方法，这个方法就是用于创建虚拟元素 Virtual Dom 的。

React 把真实的 DOM 树转换成 Javascript 对象树，也就是 Virtual Dom。

每次数据更新后，重新计算 Virtual Dom ，并和上一次生成的 virtual dom 做对比，对发生变化的部分做批量更新。

而 React 是通过创建与更新虚拟元素 Virtual Element 来管理整个Virtual Dom 的。

虚拟元素可以理解为真实元素的对应，它的构建与更新都是在内存中完成的，并不会真正渲染到 dom 中去。

回到我们的计数器 counter 组件：

注意下 a 标签 createElement 的返回结果，这里 CreateElement 只是做了简单的参数修正，返回一个 ReactElemet 实例对象。

Virtual element 彼此嵌套和混合，就得到了一颗 virtual dom 的树：

Element 如何生成DOM

现在我们有了由 ReactElement 组成的 Virtual Dom 树，接下来我们要怎么我们构建好的 Virtual dom tree 渲染到真正的 DOM 里面呢？

这时可以利用 ReactDOM.render 方法，传入一个 reactElement 和一个作为容器的 DOM 节点。

看进去 ReactDOM.render 的源码，里面有两个比较关键的步骤:

第一步是 instantiateReactComponent。

这个函数创建一个 ReactComponent 的实例并返回，也可以看到 ReactDOM.render 最后返回的也是这个实例。

instantiateReactComponent 方法是初始化组件的入口函数，它通过判断 node 的类型来区分不同组件的入口。

当 node 为空的时候，初始化空组件。
当 node 为对象，类型 type 字段标记为是字符串，初始化 DOM 标签。否则初始化自定义组件。
当 node 为字符串或者数字时，初始化文本组件。

虽然 Component 有多种类型，但是它们具有基本的数据结构：ReactComponent 类。

注意到这里的 setState, 这也是重点之一。

创建了 Component 实例后，调用 component 的 mountComponent 方法，注意到这里是会被批量 mount 的，这样组件就开始进入渲染到 DOM 的流程了。

React生命周期

React 组件基本由三个部分组成，

属性 props
状态 state
生命周期方法

React 组件可以接受参数props, 也有自身状态 state。一旦接受到的参数 props 或自身状态 state 有所改变，React 组件就会执行相应的生命周期方法。 React 生命周期的全局图

首次挂载组件时，按顺序执行

componentWillMount、
render
componentDidMount

卸载组件时，执行 componentDidUnmount

当组件接收到更新状态，重新渲染组件时，执行

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

更新策略

通过 updateComponent 更新组件，首先判读上下文是否改变，前后元素是否一致，如果不一致且组件的 componentWillReceiveProps 存在，则执行。然后进行 state 的合并。

调用 shouldComponentUpdate 判断是否需要进行组件更新，如果存在 componentWillUpdate 则执行。

后面的流程跟 mountComponent 相似，这里就不赘述了。

setState机制

为避免篇幅过长，这部分可移步我的另一篇文章：

[第10期] 深入了解 React setState 运行机制

Diff算法

Diff算法用于计算出两个virtual dom的差异，是React中开销最大的地方。

传统diff算法通过循环递归对比差异，算法复杂度为 O(n3)。

React diff算法制定了三条策略，将算法复杂度从 O(n3)降低到O(n)。

1. UI中的DOM节点跨节点的操作特别少，可以忽略不计。
2. 拥有相同类的组件会拥有相似的DOM结构。拥有不同类的组件会生成不同的DOM结构。
3. 同一层级的子节点，可以根据唯一的ID来区分。

1. Tree Diff

对于策略一，React 对树进行了分层比较，两棵树只会对同一层次的节点进行比较。

只会对相同层级的 DOM 节点进行比较，当发现节点已经不存在时，则该节点及其子节点会被完全删除，不会用于进一步的比较。

如果出现了 DOM 节点跨层级的移动操作。

如上图这样，A节点就会被直接销毁了。

Diif 的执行情况是：create A -> create C -> create D -> delete A

2. Element Diff

当节点处于同一层级时，diff 提供了 3 种节点操作：插入、移动和删除。
对于同一层的同组子节点添加唯一 key 进行区分。

通过 diff 对比后，发现新旧集合的节点都是相同的节点，因此无需进行节点删除和创建，只需要将旧集合中节点的位置更新为新集合中节点的位置.

原理解析

几个概念

对新集合中的节点进行循环遍历，新旧集合中是否存在相同节点
nextIndex: 新集合中当前节点的位置
lastIndex: 访问过的节点在旧集合中最右的位置（最大位置）
If (child._mountIndex < lastIndex)

对新集合中的节点进行循环遍历，通过 key 值判断，新旧集合中是否存在相同节点，如果存在，则进行移动操作。

在移动操作的过程中，有两个指针需要注意，

一个是 nextIndex，表示新集合中当前节点的位置，也就是遍历新集合时当前节点的坐标。

另一个是 lastIndex，表示访问过的节点在旧集合中最右的位置，

更新流程：

( 如果新集合中当前访问的节点比 lastIndex 大，证明当前访问节点在旧集合中比上一个节点的位置靠后，则该节点不会影响其他节点的位置，即不进行移动操作。只有当前访问节点比 lastIndex 小的时候，才需要进行移动操作。)

首先，我们开遍历新集合中的节点, 当前 lastIndex = 0, nextIndex = 0，拿到了 B.

此时在旧集合中也发现了 B，B 在旧集合中的 mountIndex 为 1 ，比当前 lastIndex 0 要大，不满足 child._mountIndex < lastIndex，对 B 不进行移动操作，更新 lastIndex = 1, 访问过的节点在旧集合中最右的位置，也就是 B 在旧集合中的位置，nextIndex++ 进入下一步。

当前 lastIndex = 1, nextIndex = 1，拿到了 A，在旧集合中也发现了 A，A 在旧集合中的 mountIndex 为 0 ，比当前 lastIndex 1 要小，满足 child._mountIndex < lastIndex，对 A 进行移动操作，此时 lastIndex 依然 = 1, A 的 _mountIndex 更新为 nextIndex = 1, nextIndex++, 进入下一步.

这里，A 变成了蓝色，表示对 A 进行了移动操作。

当前 lastIndex = 1, nextIndex = 2，拿到了 D，在旧集合中也发现了 D，D 在旧集合中的 mountIndex 为 3 ，比当前 lastIndex 1 要大，不满足 child._mountIndex < lastIndex，不进行移动操作，此时 lastIndex = 3, D 的 _mountIndex 更新为 nextIndex = 2, nextIndex++, 进入下一步.

当前 lastIndex = 3, nextIndex = 3，拿到了 C，在旧集合中也发现了 C，C 在旧集合中的 mountIndex 为 2 ，比当前 lastIndex 3 要小，满足 child._mountIndex < lastIndex，要进行移动，此时 lastIndex不变，为 3, C 的 _mountIndex 更新为 nextIndex = 3.

由于 C 已经是最后一个节点，因此 diff 操作完成.

这样最后，要进行移动操作的只有 A C。

另一种情况

刚刚说的例子是新旧集合中都是相同节点但是位置不同。

那如果新集合中有新加入的节点且旧集合存在需要删除的节点，

那 diff 又是怎么进行的呢？比如：

首先，依旧，我们开遍历新集合中的节点, 当前 lastIndex = 0, nextIndex = 0，拿到了 B，此时在旧集合中也发现了 B，B 在旧集合中的 mountIndex 为 1 ，比当前 lastIndex 0 要大，不满足 child._mountIndex < lastIndex，对 B 不进行移动操作，更新 lastIndex = 1, 访问过的节点在旧集合中最右的位置，也就是 B 在旧集合中的位置，nextIndex++ 进入下一步。

当前 lastIndex = 1, nextIndex = 1，拿到了 E，发现旧集合中并不存在 E，此时创建新节点 E，nextIndex++，进入下一步

当前 lastIndex = 1, nextIndex = 2，拿到了 C，在旧集合中也发现了 C，C 在旧集合中的 mountIndex 为 2 ，比当前 lastIndex 1 要大，不满足 child._mountIndex < lastIndex，不进行移动，此时 lastIndex 更新为 2, nextIndex++ ，进入下一步

当前 lastIndex = 2, nextIndex = 3，拿到了 A，在旧集合中也发现了 A，A 在旧集合中的 mountIndex 为 0 ，比当前 lastIndex 2 要小，不满足 child._mountIndex < lastIndex，进行移动，此时 lastIndex 不变, nextIndex++ ，进入下一步

当完成新集合中所有节点的差异化对比后，还需要对旧集合进行循环遍历，判断是否勋在新集合中没有但旧集合中存在的节点。

此时发现了 D 满足这样的情况，因此删除 D。

Diff 操作完成。

整个过程还是很繁琐的，明白过程即可。

二、性能优化

由于react中性能主要耗费在于update阶段的diff算法，因此性能优化也主要针对diff算法。

减少diff算法触发次数

减少diff算法触发次数实际上就是减少update流程的次数。

正常进入update流程有三种方式：

1.setState

setState机制在正常运行时，由于批更新策略，已经降低了update过程的触发次数。

因此，setState优化主要在于非批更新阶段中(timeout/Promise回调)，减少setState的触发次数。

常见的业务场景即处理接口回调时，无论数据处理多么复杂，保证最后只调用一次setState。

2.父组件render

父组件的render必然会触发子组件进入update阶段（无论props是否更新）。此时最常用的优化方案即为shouldComponentUpdate方法。

最常见的方式为进行this.props和this.state的浅比较来判断组件是否需要更新。或者直接使用PureComponent，原理一致。

需要注意的是，父组件的render函数如果写的不规范，将会导致上述的策略失效。

// Bad case
// 每次父组件触发render 将导致传入的handleClick参数都是一个全新的匿名函数引用。
// 如果this.list 一直都是undefined，每次传入的默认值[]都是一个全新的Array。
// hitSlop的属性值每次render都会生成一个新对象
class Father extends Component {
    onClick() {}
    render() {
        return <Child handleClick={() => this.onClick()} list={this.list || []} hitSlop={{ top: 10, left: 10}}/>
    }
}
// Good case
// 在构造函数中绑定函数，给变量赋值
// render中用到的常量提取成模块变量或静态成员
const hitSlop = {top: 10, left: 10};
class Father extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
        this.list = [];
    }
    onClick() {}
    render() {
        return <Child handleClick={this.onClick} list={this.list} hitSlop={hitSlop} />
    }
}