面试题：React 中渲染复杂列表时如何优化 key 的使用

Question

在 React 渲染复杂列表场景下，例如一个包含多层嵌套数据结构展示的列表，简述 key 的作用以及使用不当可能会引发的问题，并说明如何正确选择 key 值以优化列表渲染。

Answer 1

key 的作用

1. 高效更新：在 React 中，当列表数据发生变化时，React 通过 key 来识别哪些元素发生了改变、添加或删除。它帮助 React 高效地复用和更新 DOM 节点，而不是重新渲染整个列表，提升性能。例如，在一个待办事项列表中，当添加或删除一项时，React 可以根据 key 快速定位并更新相应的 DOM 元素。
2. 保持组件状态：对于列表中的组件，key 可以帮助 React 正确保持组件的状态。比如在一个包含输入框的列表中，每个输入框有自己的输入状态，key 确保输入框的状态不会因为列表的重新渲染而混淆。

使用不当引发的问题

1. 状态混淆：如果列表项的 key 值重复或者使用索引作为 key，当列表顺序发生改变时，可能导致组件状态混淆。例如，在一个输入框列表中，如果以索引为 key，当删除中间一项后，后面输入框的状态可能会被错误地分配到前面的输入框上。
2. 性能下降：不正确的 key 可能使 React 无法准确识别变化，导致不必要的 DOM 重新渲染。比如每次渲染都生成新的随机 key，React 会认为所有列表项都是新的，从而重新创建和销毁 DOM 元素，大大降低性能。

正确选择 key 值优化列表渲染

1. 使用唯一标识：优先使用数据中具有唯一性的标识作为 key，如数据库中的 ID。例如，在用户列表中，每个用户有唯一的用户 ID，将其作为 key 是最佳选择。
2. 避免使用索引：尽量避免使用数组索引作为 key，尤其是在列表可能会频繁插入、删除或重新排序的情况下。因为索引会随着列表顺序变化而变化，导致 React 无法准确识别组件。
3. 稳定不变：key 值应该在组件的整个生命周期内保持稳定，不要在每次渲染时都发生变化，这样 React 才能有效地复用 DOM 节点和保持组件状态。