1. 虚拟DOM

1.1概念

虚拟DOM的概念：虚拟DOM就是一个用来描述真实DOM的JS对象。

1.2 为什么使用虚拟DOM

• 虚拟DOM可以维护程序的状态， 跟踪上一次的状态;
• 通过比较前后两次状态的差异更新真实DOM;
• 真实DOM属性很多， 创建节点开销很大;
• 虚拟DOM只是普通的JS对象， 描述属性并不是很多， 创建开销很小;

• 负责视图情况下提升渲染性能（操作真实DOM性能消耗大， 减少操作DOM的范围可以提升性能。）

  1.3 使用虚拟DOM旧一定比直接渲染真实DOM快吗？

• 不一定。复杂视图情况下提升渲染性能，因为虚拟DOM + Diff算法可以尽快找到DOM树变更的地方， 减少DOM的操作。（重绘和重排）

  2. diff算法

  

  2.1 diff算法的过程

• 用JS对象模拟DOM(虚拟DOM)

• 把此虚拟DOM转化为真实DOM并插入页面中（render）
• 如果有事件发生修改此虚拟DOM, 比较两颗虚拟DOM树的擦会议， 得到差异对象（diff）。

• 把差异对象应用到真实DOM树上（patch）

  3. key的作用

  3.1 虚拟DOM中key的作用：

  1. 简答说： key是虚拟DOM对象的标识，在更新显示时key起着及其重要的作用。
  2. 详细的说： 当状态中数据发生变化时， react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较， 比较规则如下：

  1. 旧虚拟DOM中找到与新虚拟DOM相同的key:
     1. 若虚拟DOM中内容没有变化， 直接使用之前的真实DOM
     2. 若虚拟DOM中的内容发生了变化，则生成新的真实DOM，随后会替换掉页面中之前的真实DOM
  2. 旧虚拟DOM中未找到与新的虚拟DOM相同的key
     1. 根据数据创建新的真实DOM, 随后渲染到页面

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

1. 若对数据进行： 逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==》 界面显示没有问题， 但是效率低；
   2. 如果结构中还包含输入类的DOM:会产生错误的DOM更新 ==》 界面显示有问题；
   3. 注意： 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作， 仅用于渲染列表用于展示， 使用index作为key是没问题的。

   3.3 开发中如何选择key?

2. 最好使用每条数据唯一的标识作为key, 比如： id、身份证号、学号等唯一值；
   2. 如果确定只是简单的展示数据， 用index是没问题的。