写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

1,308 阅读1分钟

(1)不写key

+ 就地复用节点:在比较新旧两个节点是否是同一个节点的过程中
会判断成新旧两个节点是同一个节点,
因为 a.keyb.key 都是 undefined。所以不会重新创建节点和删除节点;
所以可能在某种程度上(创建和删除节点方面)会有渲染性能上的提升;
+ 但是只是针对无状态的组件来说;对于有状态的组件,
如果复用可能会出现一些未知的bug;

(2)写key

  • 维持组件的状态,保证组件的复用。因为有 key 唯一标识了组件,不会在每次比较新旧两个节点是否是同一个节点的时候直接判断为同一个节点,而是会继续在接下来的节点中找到 key 相同的节点去比较,能找到相同的 key 的话就复用节点,不能找到的话就增加或者删除节点。

  • key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度;

    为了增强复用性,在diff两个新老list的时候采用四种命中查找的方式: 新前==旧前 新后==旧后 新后==旧前 新前==旧后 这样查找如果相同就复用节点; 如果上面的四种同级比较策略没有找到可以复用的 dom 元素;会采用map的方式,将旧的list中剩下的元素弄成一个map,key为每个节点的key,value是索引,然后新的节点在这个map中寻找,如果没有就进行创建,如果有就复用;如果没有key,需要循环去遍历,耗费性能;