react技术全家桶（34）react-DOM的diffing的算法

react 每一次渲染都不是对真实DOM进行修改的。每个真实DOM都会对应一个虚拟DOM 每次都会讲虚拟DOM和真是DOM进行比较，如果有变化才会修改真是的DOM。

两者对比的力度是标签。没有改变的标签不会动 只有改变的标签才会进行对真实的DOM操作。如上图span会变化 其他的不会变化 可以在input中输入值 会发现 时间在动 但是文本框中的值没变化 所以inputDOM没有刷新。

对于标签套标签：

diffing的算法是 :只改变span中的文本内容 对于span中的标签是否刷新 就看对比结果 如果对比没有发生变化 那么就不会进行渲染。

经典的面试题：
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： 若虚拟DOM中内容没变化，直接使用之前的真实DOM 若虚拟DOM中内容变化了，则生成新的真实DOM。随后替换掉页面中之前的真是DOM。
b.旧虚拟DOM中未找到与新的虚拟DOM相同的key ，根据数据创建新的真是DOM 随后渲染到页面。
2.用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有要的真实DOM更新 界面效果么有问题 但是效率低。

对比后发现key为0的初始数据和更新后的数据不一样所以得重新渲染，所以三条数据都得重新操作真实DOM 如果不用index的话 有两条数据可以服用，但是使用了index，导致三条数据要操作真实DOM ，所以效率低
2.如果结构中还包含输入类的DOM：会产生错误DOM更新 界面有问题。
3.注意！如果不存在对数据的逆序添加、逆序删除等蒲怀顺序操作，仅仅用于渲染列表展示，使用index作为key是没有问题的