React 虚拟 DOM 与 Key

🌙
手机阅读
本文目录结构

Virtual DOM 的工作原理,理解 Key 属性的作用

Virtual DOM 是 JSX 的运行基础;

  • 算法复杂度为 O(n)
  • 虚拟 DOM 如何计算 Diff
  • key 属性的作用

算法复杂度为 O 的 n 次方

DOM Tree 前后变化的 Diff 辨别,复杂度非常高的,复杂度为 O 的 n 次方;

虚拟 DOM 如何计算 Diff

React 是下面这样处理的;

  • 广度优先分层比较(按照组件树,一层一层的做对比)
  • 从根节点开始比较(第一层:组件的根)
  • 属性变化及顺序(第二层:组件 A+B 改为 B+A 了)
  • 节点类型发生变化(第三层:开始组件 A 后跟 F;现在改为组件 A 后跟 G,就直接删除 F,push 组件 G)
  • 节点跨层移动(第三层:B 后跟 CD,变成了 B 后跟 X,会直接删除 CD 以及 CD 下面的组件,push 组件 X)
    • 第四层 D 跟在 X 后面,直接把 Dpush 到 X;

虚拟 DOM 算法工作的两个假设

  • 组件的 DOM 结构是相对稳定的,很少发生跨层移动的(尽量不要跨层移动)
  • 类型相同的兄弟节点可以被唯一标示(我们需要手动传入一个固定的 Key,尽量不用 index,length 这种可变的值做 key)

key 属性的作用

因为虚拟 DOM 算法的工作假设,所以需要传入 key;传入 key 不仅仅是消除 warning,是因为要配合 DIff 算法,提高性能;


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>