react中key的作用

52 阅读1分钟

key 的作用

react 采用 diff 算法,如果有改动就会先生成虚拟 dom,
它会利用 key 来识别组件,当新旧两个虚拟 dom 进行对比的时候,会根据 key 的变化来进行渲染真实 dom,
如果一个元素的 key 发生变化,那么两次渲染就会认为是不同的元素,
旧的元素会被销毁,新的元素会被创建,所以key要具有唯一性且稳定性,节约性能开销。
这也就是为什么有些情况不能用index作为元素的key,
例如一个列表里有五个列表项,每一个列表项用index作为标识,当删除index为1的列表项的时候,
原来index为2的列表项会变成1,那么这个时候key发生了变化,就会认为需要重新创建这个列表项,以此类推,就会引发不必要的渲染。