浅谈React(3)React的key

最新推荐文章于 2022-10-01 09:22:45 发布

马花花呀蒋蒋

最新推荐文章于 2022-10-01 09:22:45 发布

阅读量159

点赞数 1

分类专栏： react学习文章标签： react

本文链接：https://blog.csdn.net/weixin_44223361/article/details/111722318

版权

6 篇文章 0 订阅

订阅专栏

浅谈React

传统diff算法时间复杂度达到了O(n3),React结合所需特点，优化到O(n)
策略
- 我们对DOM的跨层级操作很少
- 相同类的两个组件将拥有相似的树形结构
- 同一层一组的组件可以通过key进行区分
基于上述策略，react diff的优化分为tree diff、component diff、element diff
基于策略一，tree diff只对同一层级的节点进行diff，若节点出现跨层级移动直接新增和删除来处理。
基于策略二，React是基于组件来构建应用的，若是同一类组件则继续按原策略进行diff，如果发现组件不为同一类组件则直接替换改组件以及其下所有子节点
当节点处于同一层级时，React提供了三种操作：插入、删除和移动，但是仅此的话很可能会造成操作冗余，比如说新的一层节点只是顺序发生了变化，并没有新增或者删除，此时React会一个一个进行对比，如果没有则新增，多余则删除，最后造成简单移动就可以完成却将所有节点都重新删除新增了一次。
为此，我们可以为同一层级下一组节点每个节点都添加一个唯一的key。每次先遍历新的虚拟DOM所有节点，然后通过唯一的key判断新旧虚拟DOM是否有相同的key，若有相同的key,则移动组件，同时看相同key的节点属性是否改变，若改变则更新组件属性。