阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 算法,提高性能;

      目录
      目录