虚拟DOM:
react在内存中生成维护一个和真实DOM一样的虚拟DOM树,在改动组件后,会再生成一个新的DOM树,react会将新的虚拟DOM树和原虚拟DOM树进行对比,找到两个DOM不同的地方的diff,然后把diff放在队列中,批量去更新diff到真实的DOM上
diff算法
key的作用
-
key的作用主要是用来减少没必要的diff算法对比,因为对于一个组件或者节点来说,只要父节点状态或者属性发生改变,该组件就会进行diff对比。如果为组件引入了key值,就可以在diff算法对比之前先做一个校验,判断该组件是否需要进行diff对比,也可以判断该组件是直接更新、销毁还是新建等操作,从而提高diff算法的效率
-
特别是在渲染同级同结构的组件时,key可以为它们加上身份的标志,在render时,可以通过key来判断该组件是否存在,是否需要进行更新、销毁或者新建等操作