React diff 算法

头像
深蓝一人
    阅读 10 分钟
    2

    前言

    很久以前写过一篇了解虚拟DOM 的文章，主要讲解了vue为什么会使用虚拟 DOM 以及 VUE 的 diff 算法。最近技术栈迁移到了 React，就好好研究了一下 React diff 算法的实现。

    React 版本号 16.9.0

    React Fiber

    在了解 React diff 算法之前，先了解 React Fiber 相关的知识，将有助于后面对 diff 算法中比对的理解。React 16版本之后推出了 Fiber 的概念，React Fiber是对核心算法的一次重新实现，本文主要是讲 diff 算法，因此忽略分片、更新优先级这些概念，可以简单的将 Fiber理解为 DOM 结构的 JS 映射。

    例如如下的 React 代码

    class App extends React.Component {

  state = {
    list: [{
      key: 'A',
      value: '我是 A'
    }, {
      key: 'B',
      value: '我是 B'
    }, {
      key: 'C',
      value: '我是 C'
    }, {
      key: 'D',
      value: '我是 D'
    }, {
      key: 'E',
      value: '我是 E'
    }]
  };


  btn2Click = () => {
    //
  }

  render () {
    const { list } = this.state;
    return (
    <div className="App">
      <span className="btn-2" onClick={this.btn2Click}>
        点击调换顺序
      </span>
      {
        list.map((item) => (<div key={item.key}>{item.value}</div>))
      }
    </div>
    )};
}

    映射为 React Fiber 的简略表示为

    { // FiberNode
  memoizedProps: {},
  memoizedState: {
    list: [{
      // 此处省略，是定义在 state 中的 list
    }]
  },
  // 在Fiber树更新的过程中，每个Fiber都会有一个跟其对应的Fiber
  // 我们称他为`current <==> workInProgress`
  // 在渲染完成之后他们会交换位置
  alternate: Fiber | null,
  child: { // FiberNode，为div.App的第一个子节点
    elementType: "span",
    memoizedProps: {
      children: "点击调换顺序",
      className: "btn-2",
      onClick: () => { }
    },
    memoizedState: null,
    return: { // FiberNode 对应其父节点的FiberNode
      // ... 省略其它
      stateNode: 'div.App'
    },
    sibling: { // FiberNode，span.btn-2的下一个兄弟节点，此处为一个虚拟的节点
      child: {
        elementType: "div",
        child: null,
        index: 0,
        key: "A",
        memoizedProps: {
          children: "我是 A",
        },
        return: {
          // 虚拟父节点
        },
        sibling: {
          elementType: "div",
          child: null,
          index: 0,
          key: "B",
          memoizedProps: {
            children: "我是 B",
          },
          return: {
            // 同 A，虚拟父节点
          },
          sibling: {
            // 省略，key 为 C，其 sibing key 为 D;D的 Sibing 为 E，结束
          }
        }
      },
      elementType: null,
      memoizedProps: [{
        $$typeof: Symbol(react.element),
        key: "A",
        props: {
          children: "我是 A"
        },
        type: "div"
      }, {
        // 省略其它
      }],
      memoizedState: null,
      return: { // FiberNode 对应其父节点的FiberNode
        // ... 省略其它
        stateNode: 'div.App'
      }
    },
    stateNode: 'span.btn-2' // 实际是真正的span.btn-2 元素
  },
  sibling: null,
  stateNode: 'div.App' // 实际是真正的div.App 元素
}

    其中截取了 span.btn-2的完整 FiberNode的表示
    Xnip2020-05-26_18-45-33.jpg

    使用图来表示：

    Xnip2020-05-27_16-15-21.jpg

    即：

    • 每个 Fiber的 child 指向其第一个孩子节点，没有孩子节点则为 null
    • 每个 Fiber的sibling 指向其下一个兄弟节点，没有则为 null
    • 每个 Fiber的return 指向其父节点
    • 每个 Fiber有一个 index 属性表示其在兄弟节点中的排序
    • 每个 Fiber的 stateNode 指向其原生节点
    • 每个 Fiber有一个 key 属性

    React diff 算法

    给定任意两棵树，找到最少的转换步骤。但是标准的的Diff算法复杂度需要O(n^3)。考虑到前端操作的情况--我们很少跨级别的修改节点，虚拟DOM在比较时只比较同层次节点，其复杂度降低到了O(n). 而且比较时只比较其key和type是否相同，相同即为相同节点

    // 节选自 updateSlot
if (newChild.key === key) {
    // 节选自 updateElement
    if (current.elementType === element.type) {
       
    } else {
      // 直接创建新节点
    }
} else {
return null;
}

    例子：下图节点从左图变为右图

    虚拟DOM的做法是

    A.destroy(); 
A = new A(); 
A.append(new B()); 
A.append(new C()); 
D.append(A);

    而不是

    A.parent.remove(A);
D.append(A);

    示例1

    对于例子中的state 由[A, B, C, D, E] 变为[A, F, B, C, D]的操作，diff 算法如何进行的处理？key 在这其中又扮演什么觉得呢？

    btn2Click = () => {
    this.setState({
      list: [{
        key: 'A',
        value: '我是 A'
      }, {
        key: 'F',
        value: '我是 F'
      }, {
        key: 'B',
        value: '我是 B'
      }, {
        key: 'C',
        value: '我是 C'
      }, {
        key: 'D',
        value: '我是 D'
      }]
    })
  }
  
 ...
 <span className="btn-2" onClick={this.btn2Click}>
    点击调换顺序
  </span>

    如果按照常规的从头到尾比较，第一个元素 A 相同，后面的元素依次比较，key 都不相同, 需要删除 A 后面的 BCDE，再添加上FBCD. 原来的 BCD 节点完全没有被复用。React 是怎么做的呢？

    首先通过reconcileChildrenArray对节点进行组装。

    function placeChild(
    newFiber: Fiber,
    lastPlacedIndex: number,
    newIndex: number,
  ): number {
    newFiber.index = newIndex;
    const current = newFiber.alternate;
    // 标记 1-1
    if (current !== null) {
      // 标记 1-2
      const oldIndex = current.index;
      if (oldIndex < lastPlacedIndex) {
        // 标记 1-3 This is a move.
        newFiber.effectTag = Placement;
        return lastPlacedIndex;
      } else {
        // 标记 1-4 This item can stay in place.
        return oldIndex;
      }
    } else {
      // 标记 1-5 This is an insertion.
      newFiber.effectTag = Placement;
      return lastPlacedIndex;
    }
  }

function reconcileChildrenArray(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    newChildren: Array<*>,
    expirationTime: ExpirationTime,
  ): Fiber | null {
    let resultingFirstChild: Fiber | null = null;
    let previousNewFiber: Fiber | null = null;

    let oldFiber = currentFirstChild;
    let lastPlacedIndex = 0;
    let newIdx = 0;
    let nextOldFiber = null;
    // 标记 1
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
       // 标记 2
      if (oldFiber.index > newIdx) {
        nextOldFiber = oldFiber;
        oldFiber = null;
      } else {
        nextOldFiber = oldFiber.sibling;
      }
      // 标记 3
      // updateSlot 判断newChildren[newIdx]与oldFiber的 key 和type 是否一致。如果不一致，返回 null，如果一致，返回return指向returnFiber的newFiber
      const newFiber = updateSlot(
        returnFiber,
        oldFiber,
        newChildren[newIdx],
        expirationTime,
      );
      // 标记 4
      if (newFiber === null) {
        // 没有 children
        // 标记 5
        if (oldFiber === null) {
          oldFiber = nextOldFiber;
        }
        // 遍历到 F 节点的时候，命中 break
        // 标记 6
        break;
      }
      // 标记 7
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      // 标记 8
      if (previousNewFiber === null) {
        // 将新节点通过sibling进行连接
        resultingFirstChild = newFiber;
      } else {
        // 将新节点通过sibling进行连接
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
      oldFiber = nextOldFiber;
      // 标记 9
    }


    // 标记 10
    if (newIdx === newChildren.length) {
      // 删除剩余的旧的节点
      deleteRemainingChildren(returnFiber, oldFiber);
      return resultingFirstChild;
    }

    // 标记 11
    if (oldFiber === null) {
      // 创建新节点
      for (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(
          returnFiber,
          newChildren[newIdx],
          expirationTime,
        );
        if (newFiber === null) {
          continue;
        }
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          // TODO: Move out of the loop. This only happens for the first run.
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
      return resultingFirstChild;
    }

    // 标记 12  Add all children to a key map for quick lookups.
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

    //  标记 13 Keep scanning and use the map to restore deleted items as moves.
    for (; newIdx < newChildren.length; newIdx++) {
    //  标记 14
      const newFiber = updateFromMap(
        existingChildren,
        returnFiber,
        newIdx,
        newChildren[newIdx],
        expirationTime,
      );
      if (newFiber !== null) {
          // 省略代码，将 newFiber 从existingChildren中删除掉
          //  标记 15
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        //  标记 16
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
    }
    // 省略代码，删除剩余的existingChildren
    //  标记 17
    return resultingFirstChild;
  }

    按照如下流程：
    image.png

    image.png

    image.png
    image.png
    Xnip2020-06-02_21-10-51.jpg
    image.png

    组装为以下结构：

    // 新的第一个节点节选
{
    alternate: { // 旧的位置
        index: 0,
        key: "A",
        sibling: {
            //... 旧的 B 节点，sibling 为 C 节点 等等
        }
    },
    index: 0,
    key: "A",
    effectTag: 0,
    sibling: {
        alternate: null, // 没有旧的对应的节点，说明是新增
        index: 1,
        key: "F",
        effectTag: 2,
        sibling: {
            alternate: {
                index: 1,
                key: "B"
            },
            index: 2,
            key: "B",
            effectTag: 0, // 不需要挪位置
            sibling: {
                alternate: {
                    index: 2,
                    key: "C"
                },
                index: 3,
                key: "C",
                effectTag: 0,
                sibling: {
                    alternate: {
                        index: 3,
                        key: "D"
                    },
                    index: 4,
                    key: "D",
                    effectTag: 0,
                }
            }
        }
    }
  }
  
  // 更新节点，commitMutationEffects 中
nextEffect = {
    effectTag: 8, // 删除
    key: E,
    nextEffect: {
        effectTag: 2, // 新增
        key: F
    }
}

    因此，节点渲染的顺序为

    1. ABCD保持不动
    2. 删除 E 节点
    3. 将 F 节点添加到 B 之前

    总结来说：

    • 维护一个 lastPlacedIndex 和 newIndex
    • lastPlacedIndex = 0， newIndex为按顺序第一个与 old 节点 key 或者 type 不同的节点
    • 依次遍历新节点。取出旧节点对应的oldIndex(如果旧节点中存在)， oldIndex < lastPlacedIndex，则newFiber.effectTag = Placement，且lastPlacedIndex不变；否则，节点位置保持不变，将lastPlacedIndex = oldIndex

    示例2

    如果从[A, B, C, D, E]变为[B, C, D, E, A]， 则

    nextEffect = {
    effectTag: 2, // 移动或添加。调用 appendChild，如果是已有节点，原生会操作移动
    key: A,
    nextEffect: null
}
    1. lastPlacedIndex = 0, newIndex = 0
    2. newFiber 遍历 B 节点，oldIndex = 1 > lastPlacedIndex 不做操作，且 lastPlacedIndex = oldIndex = 1
    3. lastPlacedIndex = 1, newIndex = 1
    4. newFiber 遍历 C 节点, oldIndex = 2 > lastPlacedIndex 不做操作，且 lastPlacedIndex = oldIndex = 2`
    5. lastPlacedIndex = 2, newIndex = 2
    6. newFiber 遍历 D 节点, oldIndex = 3 > lastPlacedIndex 不做操作，且 lastPlacedIndex = oldIndex = 3
    7. E 同理...
    8. lastPlacedIndex = 3, newIndex = 3
    9. newFiber 遍历 A 节点, oldIndex = 0 < lastPlacedIndex`，移动 A 节点

    因此，节点渲染的顺序为

    1. 移动 A

    示例3

    如果从[A, B, C, D, E]变为[E, A, B, C, D]， 则

    1. lastPlacedIndex = 0, newIndex = 0
    2. newFiber 遍历 E 节点，oldIndex = 4 > lastPlacedIndex 不做操作，且 lastPlacedIndex = oldIndex = 4
    3. lastPlacedIndex = 4, newIndex = 1
    4. newFiber 遍历 A 节点，oldIndex = 0 < lastPlacedIndex 移动之， lastPlacedIndex保持不变
    5. lastPlacedIndex = 4, newIndex = 2
    6. B 节点 oldIndex 为 1 < lastPlacedIndex, 同理，移动之
    7. lastPlacedIndex = 4, newIndex = 3
    8. C 节点 oldIndex 为 2 < lastPlacedIndex, 同理，移动之
    9. D节点同理...
    nextEffect = {
    effectTag: 2, // 移动或添加。调用 appendChild，如果是已有节点，原生会操作移动
    key: A,
    nextEffect: {
      effectTag: 2,
      key: B,
      nextEffect: {
          effectTag: 2,
          key: C,
          nextEffect: {
              effectTag: 2,
              key: D,
              nextEffect: null
          }
      }
    }
}
    1. 移动 A
    2. 移动 B
    3. 移动 C
    4. 移动 D

    总结

    • diff 算法将 O(n3) 复杂度的问题转换成 O(n)
    • key 的作用是为了尽可能的复用节点
    • 虚拟DOM的优势并不在于它操作DOM比较快，而是能够通过虚拟DOM的比较，最小化真实DOM操作，参考文档
    react.js前端
    深蓝一人
    1.6k 声望65 粉丝

    暂时没有个人简介

    « 上一篇
    React setState是同步还是异步
    下一篇 »
    web crash监控

    引用和评论

    推荐阅读
    头像
    React SSR 原理梳理

    深蓝一人赞 10阅读 5.9k评论 1

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.7k

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    0 条评论
    得票最新