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 算法，提高性能；