DOM的diffing算法

• 基本原理

  当状态中数据发生变化时，react会根据新数据生成新的虚拟DOM，然后将新虚拟DOM和旧虚拟DOM进行diff比较，如果内容没有变化，就直接使用之前的真实DOM，如果有变化，就根据新虚拟DOM生成新的真实DOM，然后将新的真实DOM渲染到页面中替换旧真实DOM。

• 虚拟DOM中key的作用：

  1、将新虚拟DOM和旧虚拟DOM进行diff比较时，如果在旧虚拟DOM中找到了和新虚拟DOM 相同的key，就比较两者的内容，如果内容没变，则直接使用之前的真实DOM，如果内容变了，就根据新虚拟DOM生成新的真实DOM，然后将新的真实DOM渲染到页面中替换旧真实DOM。

  2、如果没有在旧虚拟DOM中找到和新虚拟DOM相同的key，直接根据新虚拟DOM生成新的真实DOM，然后将新的真实DOM渲染到页面中替换旧真实DOM。

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

  当使用index作为虚拟DOM的key时，如果对数据做了一些逆序添加、逆序删除等破坏原有顺序的操作，在进行新旧虚拟DOM 比较时，即使有些数据没有发生变化，但因为index的改变，和新虚拟DOM进行比较的是内容完全不一样的旧虚拟DOM，这样会造成没有必要的真实DOM更新，使效率降低。当结构中还包含输入类的DOM（如input输入框）时，还会导致错误的DOM 更新，使界面有问题。