调和算法

131 阅读2分钟

1、是什么?

调和算法不是一种特定的算法,而是一种思想策略。又称diffing算法。在react中,是将旧的fiber节点和新ReactElement进行对比,判断旧的fiber节点是否可以复用。

新ReactElement:react代码中的element,传递到fiber树构建阶段,但此时并没有更新到页面上

2、为什么要用?

实现旧fiber树的节点复用,从而提高fiber树的构建性能,和DOM树的更新性能。 最终目的:少构建DOM节点,实现DOM节点的复用。

3、什么时候用的?

当要进行对比更新,fiber树重新构建时。

4、使用的策略是什么?

使用的策略是:

  • 只进行同层级节点的比较。

  • 单节点:

    • 如果当前节点的key不相同,则删除该节点及其子节点树;
    • 如果key相同,fiber.elementType和element.type不相同,则删除该节点以及其子节点树。
  • 数组节点(newChildren为新的ReactElement对象列表,oldfiber为旧fiber节点):

    • 第一次循环,如果key不一样,中断循环,当前节点之前的节点为公共序列的节点,可以进行fiber节点复用。
    • 第二次循环,遍历剩余非公共序列。从newChildren中取元素,在oldfiber中查找对比,循环完,如果newChildren中有key没有对比的元素,则该元素为新增元素;如果oldfiber中有key没有对比的元素,则该元素为要删除元素。

    要删除的元素,会被打上Deletion标记; 要新增,或者位置移动的元素,会被打上Placement标记。

5、注意点

这里使用的是有使用key来判断,该fiber节点是否可以复用,所以key的使用有一下注意点:

  • 得稳定,如果key值不稳定,则会造成大量的fiber节点不能被复用,则DOM节点不能被复用。
  • 得唯一,循环对比时会出错。

key默认是null。不要乱设置key。

详细内容可以看文章:7kms.github.io/react-illus…