React diff算法
发布网友
发布时间：2022-10-22 04:54
共1个回答
热心网友
时间：2024-11-04 11:07
react 作为一款最主流的前端框架之一，在设计的时候除了简化操作之外，最注重的地方就是节省性能了。diff算法就是为节省性能而设计的，diff算法和虚拟DOM的完美结合是react最有魅力的地方。其中，diff 是 different 的简写，这样一来，diff 算法是什么也就顾名思义了——找不同。
在DOM需要更新的时候，通过diff算法可以 计算出 虚拟DOM 中真正变化的部分，从而只针对变化的部分进行更新渲染，避免”牵一发而动全身“，造成性能浪费。
虽然完美地实现了找不同的功能，但是傻瓜式的循环递归对节点进行依次的对比，使其算法的时间复杂度为O(n^3)，其中n是dom树的节点数。如果dom数足够大的话，这个算法将对cpu形成绝杀。
为了优化diff算法，react中对普通的diff算法实行了三大策略，成功将时间复杂度降为O(n)
tree diff 是diff算法的基础策略，它的重点在于同层比较。
出于对diff算法的优化，react的tree diff对DOM节点的跨层级移动的操作忽略不计，react对Virtual DOM树进行层级控制，也就是说只对相同层级的DOM节点进行比较（即同一个父节点下的所有子节点）。对比时，一旦发现节点不存在，则直接删除掉该节点以及之下的所有子节点。这样秩序对DOM树进行依次遍历，就可以完成整个树的对比。时间复杂度为O(n)
一个疑问：既然tree diff忽略了跨层级移动的操作，如果这种情况出现了，diff算法会怎么处理呢？
答：不管，多了就新增，少了就删除（只有创建节点和删除节点的操作）。所以官方明确建议不要进行DOM节点的跨层级操作。
component diff是组件间的对比
在遇到组件之间的比较时，有三种策略
优化点：
element diff 是针对同一层级的element节点的
在双方同一层级的节点对比时，有三种情况
子节点更新时，会出现以下几种情况：
react中的key值，它不是给开发者使用的。在一般情况下key值是当我们在做子元素遍历的时候需要使用的。因为我们如果要进行数据的更新，就需要进行虚拟dom的对比，而key值就是每个元素节点对应的唯一值。这个时候就需要对比子元素的key值是否有匹配项，如果有的情况下则会进行数据的更新；如果key值没有匹配项，那么这个节点就需要进行删除和重新创建。
因此我们在遍历的时候千万不要用 index下标 或者 时间戳、随机数 等进行key值的赋值。这样会造成元素的移除重新创建浪费性能。
