React的数据渲染循环key的作用

Posted 2023-03-29

参考技术A

1.key是虚拟dom对象的标识，在更新显示时起到重要的作用

2.当状态中的数据发生变化的时候，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则见3

3.当 旧虚拟DOM 找到了与 新虚拟DOM相同 的Key：发现虚拟DOM中是否发生 改变 ， 如果发生改变那生成新的真实DOM，随后替换旧的真实DOM ，如果发现没有改变那就直接 使用之前的真实DOM
旧虚拟DOM未找到与新虚拟DOM 相同的key ， 根据数据创建新的真实DOM，随后渲染到页面当中

4.用index作为key可能会存在当数据量过大的时候重新去新旧DOM作比较的时候会 多次重新生成真实DOM ，造成不必要的DOM刷新问题，而且随着数据发生变化 数据的索引值会发生变化 让对应的DOM元素更新界面产生问题

5.对于key可以用每条数据的唯一标识，一般常用id作为唯一标识

*vue v-for中 key 值的作用—key不能用index的值*

参考技术A

上面这种是我们做项目中常用到的一种场景,因为不加key,vue现在直接报错,所以我使用index作为key;下面列举两种常见的数据更新情况

此时前三条数据直接复用之前的,新渲染最后一条数据,此时用index作为key,没有任何问题;

此时更新渲染数据,通过index定义的key去进行前后数据的对比,发现

通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染；

现在对比发现只有一条数据变化了，就是id为4的那条，因此只要新渲染着一条数据就可以了，其他都是复用之前的