Virtudom DOM 和 key

概览

文章内容选自极客时间 ebay 技术专家王沛的《 React 实战进阶》第 5 讲,本文的主题是 理解 Virtual DOMkey 属性的作用。

小结

1 算法复杂度为 O(n)
2 虚拟 DOM 如何计算 diff;
2 key 属性的作用。

内容

1 Virtual DOM 与 React 组件的联系:

JSX 的运行基础

2 diff 时机

调用 render() 产生新的 Virtual DOM

3 diff 的原理

策略:广度优先分层比较 ,从 根节点 开始,
diff 处理:不同的变化,不同的处理

(1)属性变化及顺序
如图:

image.png

处理:借助标识(key),交换顺序

(2)节点类型

如图:


image.png

处理:直接删除原有节点,创建新节点,不管旧节点是否还会用到

(3)节点跨层移动

如图:


image.png

处理:在 old 层删除原有节点,在 new 层创建新节点
总结:删除节点时,不考虑节点后续是否会用到,存在一定的性能问题
原因:UI发生变化时,很少发生节点的跨层移动,一般来说归结为:属性变化、顺序变化、类型变化

推荐阅读更多精彩内容

  • 等绿绮和玄清从房中出来时,已经换上了一身商人的服装,两人并没有从前没走出去,而是在下人们走的小门出去的U5然后两人...
    东兔角阅读 133评论 0 1
  • 不知道你有没有这样的感受?明明已经没有了高中那繁重的课业,但生活却比高中累的很多。每天疲于奔命,不知为何而忙。日子...
    蜡笔丢了小新阅读 167评论 2 5
  • 不一样的人生,总有别样风采 漫漫人生路 我们告别了17岁的雨季 转身奔上20出头的年纪 20年 你给这烂漫如烟花的...
    雨沫文心阅读 115评论 0 1
  • 巧者劳而智者忧,无能者无所求,饱食而遨游,泛若不系之舟。
    云居雁阅读 120评论 0 1