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是没有问题的