React DOM Diff算法详解-白红宇

React中文文档

前端开发中，原生JS对DOM的频繁操作往往是令人头痛并且十分影响性能的；而React在设计之初就考虑到了这种需求并将其作为重点，于是也就有了这里要说的Diff算法；可以说Diff是React性能的保障

什么是Diff算法

Diff算法是一种常用的对比差异的算法，但传统Diff算法对于DOM树的比较是比较吃力的，下面附上一份简易版Diff算法(源代码来自:)

let result = [];// 比较叶子节点const diffLeafs = function (beforeLeaf, afterLeaf) {    // 获取较大节点树的长度    let count = Math.max(beforeLeaf.children.length, afterLeaf.children.length);    // 循环遍历    for (let i = 0; i < count; i++) {        const beforeTag = beforeLeaf.children[i];        const afterTag = afterLeaf.children[i];        // 添加 afterTag 节点        if (beforeTag === undefined) {            result.push({ type: "add", element: afterTag });            // 删除 beforeTag 节点        } else if (afterTag === undefined) {            result.push({ type: "remove", element: beforeTag });            // 节点名改变时，删除 beforeTag 节点，添加 afterTag 节点        } else if (beforeTag.tagName !== afterTag.tagName) {            result.push({ type: "remove", element: beforeTag });            result.push({ type: "add", element: afterTag });            // 节点不变而内容改变时，改变节点        } else if (beforeTag.innerHTML !== afterTag.innerHTML) {            if (beforeTag.children.length === 0) {                result.push({                    type: "changed",                    beforeElement: beforeTag,                    afterElement: afterTag,                    html: afterTag.innerHTML                });            } else {                // 递归比较                diffLeafs(beforeTag, afterTag);            }        }    }    return result;}复制代码

React中的Diff

既然传统的Diff算法对于DOM操作有性能上的缺点，那么React又是如何解决这一问题的呢?下面看一段React代码

import React, { Component } from 'react';import ReactDOM from 'react-dom';class App extends Component {	render() {		return (			
    				
     Find My Fruit
			
    
		)	}}ReactDOM.render(    
    ,    document.getElementById('root'));复制代码

需要特别注意, render 执行的结果得到的不是真正的 DOM 节点. 结果仅仅是轻量级的 JavaScript 对象, 我们称之为 virtual DOM.

Diff策略

· Web UI 中DOM节点跨层级的移动操作特别少，可以忽略不计

· 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。

· 对于同一层级的一组子节点，它们可以通过唯一id进行区分。

tree diff

基于策略一，WebUI中DOM节点跨层级的移动操作少的可以忽略不计，React对Virtual DOM树进行了层级控制，只会对相同层级的DOM节点进行比较，即同一个父元素下的所有子节点，当发现节点已经不存在了，则会删除掉该节点下所有的子节点，不会再进行比较。这样只需要对DOM树进行一次遍历，就可以完成整个树的比较。复杂度变为O(n);

那么，如果真的出现跨层及操作，React是如何表现的呢? 如下图所示，A节点及其子节点被整个移动到D节点下面去，由于React只会简单的考虑同级节点的位置变换，而对于不同层级的节点，只有创建和删除操作，所以当根节点发现A节点消失了，就会删除A节点及其子节点，当D发现多了一个子节点A，就会创建新的A作为其子节点。此时，diff的执行情况是：

remove A-> add A-> add B ->add C

这种情况自然是比较消耗性能的，所以在开发React组件时要尽量保证的DOM结构的稳定，尽量避免出现跨层级操作

Components diff

React 只会匹配相同 class 的 component.说白了也就是只会对同一类型的组件进行比较，而对于不同的类型组件，则放弃比较，直接删掉旧的添加新的

比如, 如果有个 Header 被 ExampleBlock 替换掉了, React 会删除掉 header 再创建一个 example block. 我们不需要化宝贵的时间去匹配两个不大可能有相似之处的 component.

列表 diff

假设我们有个 component, 一个循环渲染了 5 个 component, 随后又在列表中间插入一个新的 component.这时候会如何操作呢?

默认操作如下:

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一的标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。同一个列表由旧变新有三种行为，插入、移动和删除，它的比较策略是对于每一个列表指定key，先将所有列表遍历一遍，确定要新增和删除的，再确定需要移动的。如图所示，第一步将D删掉，第二步增加E，再次执行时A和B只需要移动位置即可