对于页面的更新,React会调用diffing算法,将旧的虚拟dom和新的虚拟dom进行一层一层的节点比较,如果节点相同就不重新渲染到真实dom,如果不相同就重新渲染。最小的对比单位是一个节点。
一、虚拟dom中key的作用
key作为节点的表示,在节点发生更新的时候起着重要作用。在状态发生改变后,新旧虚拟dom发生比较,先比较新dom中是否有相同key值的节点,如果有则进行比较节点,如果没有,则直接渲染新的节点。
二、key值使用index可能会引发的问题
1.涉及到对数据的逆序删除、逆序插入等破坏顺序的操作=====>不会影响页面,但会引发页面许多节点的不必要更新,从而影响效率
2.在出现破坏顺序的操作的同时,结果中包含输入性节点=====>界面会出现问题
3.如果不存在逆序删除、逆序插入等破坏顺序的操作=====>单纯的页面展示用index作为key值不影响
三、使用key的建议
最好使用数据中唯一的身份表示数据作为key使用,如:id、电话号码、身份证号码等
如果只是用于展示,不涉及对数据的操作,用index也不影响