面试题：React列表更新时，Key对性能的影响及原理

Question

我们知道在React列表更新时，Key会对性能产生影响。请深入分析Key是如何影响React的渲染性能的，包括React内部的Diff算法与Key之间的关系，以及在实际项目中如何通过正确使用Key来优化列表更新的性能。

Answer 1

Key对React渲染性能的影响

1. 识别元素：在React列表更新时，key 作为列表元素的唯一标识。React 利用 key 来判断哪些元素是新的，哪些元素是已存在需要更新的，哪些元素被删除。如果没有 key，React 会默认按顺序来识别元素，这在元素顺序改变时会导致不必要的重新渲染。
2. 提升性能：通过提供稳定且唯一的 key，React 能够更高效地复用已有的 DOM 节点，避免不必要的创建和销毁操作，从而提升渲染性能。例如，在一个包含大量列表项的待办事项列表中，当用户完成一项任务将其移动到已完成列表部分，如果每个列表项有正确的 key，React 只需移动对应的 DOM 节点，而不是重新创建所有节点。

React内部Diff算法与Key的关系

1. Diff算法基础：React 使用Diff算法来比较前后两次虚拟DOM树的差异，从而最小化实际DOM操作。在对列表进行Diff时，若列表项没有key，Diff算法会采用“逐行对比”的策略，这在列表项顺序改变时效率较低。
2. Key的作用：当列表项有唯一 key 时，Diff算法能够基于 key 快速定位到对应的节点，精准地进行更新、插入或删除操作。比如，有一个有序数字列表，当其中一个数字位置交换，Diff算法根据 key 能直接找到改变位置的数字对应的节点，进行移动操作，而不是重新渲染整个列表。

在实际项目中通过正确使用Key优化列表更新性能

1. 使用稳定唯一标识：在实际项目中，应尽量使用数据本身的唯一标识作为 key，如数据库中的ID。例如，展示用户列表时，使用用户ID作为 key。若数据没有天然唯一标识，可以使用一个自增的索引，但要注意索引在列表项顺序改变时可能导致性能问题，所以尽量避免使用索引，除非列表项顺序不会改变。
2. 避免动态生成Key：不要使用随机数、Math.random()等动态变化的值作为 key，因为每次渲染时 key 都会改变，这会导致 React 认为每个列表项都是全新的，从而重新创建和销毁节点，严重影响性能。
3. 确保Key的作用域：key 应该在其所在的同层级列表内保持唯一，不同列表之间的 key 可以重复。例如，一个页面有两个不同的商品列表，每个列表内商品的 key 在各自列表中唯一即可。