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…