React-diff原理

最新推荐文章于 2024-10-01 17:50:56 发布

__lucas

最新推荐文章于 2024-10-01 17:50:56 发布

阅读量457

点赞数 5

分类专栏： web前端一命速通文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/JavaZwb/article/details/142372831

版权

传统 diff 算法的复杂度为 O(n^ 3)，显然这是无法满足性能要求的。React 通过制定一个特定的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。依次分为以下三个步骤：

tree diff。同层对比
component diff。整体性
element diff。插入/移动/删除，借助 key 尽可能复用（只做移动）
- 用 key 来构建一个老节点的 map，复用一个后要从 map 里删除
- lastPlacedIndex 表示最后一个不需要移动的节点的索引。移动时的原则是尽量少量的移动，如果必须有一个要动，新地位高的不动，新地位低的动