DOM 的 diff 算法

经典面试题：

1）react/vue中的 key 有什么作用？（key的内部原理是什么？）
2）为什么遍历列表时，key 最好不用 index？

1、虚拟dom中key的作用：

• 1） 简单的说：key 是虚拟 DOM 对象的标识，在更新显示时 key 起着极其重要的作用。
• 2）详细的说：当状态中的数据发生变化时，react 会根据【新数据】生成【新的虚拟DOM】，随后 react 进行【新虚拟DOM】与【旧虚拟DOM】的 diff 比较，比较规则如下：
  • a. 旧虚拟DOM中找到了新虚拟DOM相同的 key：
    （1）若虚拟DOM中内容没表，直接使用之前的真实DOM
    （2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
  • b. 旧虚拟DOM中未找到与新虚拟DOM相同的 key
    （1）根据数据创建新的真实 DOM，随后渲染到页面

2、用 index 作为 key 可能会引发的问题：

• 1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实 DOM 更新。===》几面效果没问题，但是效率低。

• 2）如果结构中还包含输入类的 DOM：会产生错误的 DOM 更新 ===》界面又问题

• 3）注意：如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于展示渲染列表，使用 index 作为 key 是没有问题的。

3、开发中如何选择 key？

• 1）最好使用每条数据的唯一标识作为 key，如：id、手机号、身份证号、学号等唯一值。
• 2）如果确定只是简单的展示数据，用 index 也是可以的。