前端/移动开发面试题更新 2026-08-05

在 React 中,key 属性承担着什么样的职责?

前端/移动开发性能优化技术原理React

考察说明

考查对 React 中 key 属性作用及其在协调过程中重要性的理解。

回答思路

  1. 【回答框架 1】key 是 React 在协调(reconciliation)过程中用于识别列表或集合中每个元素的唯一标识,它帮助 React 判断哪些元素被新增、删除或修改,从而高效更新真实 DOM。
  2. 【回答框架 2】当列表项的顺序或内容发生变化时,如果使用稳定的 key(如数据 id),React 可以准确跟踪每个元素,只更新必要的项,避免不必要的重新渲染。使用索引作为 key 可能在插入、删除或排序时导致组件状态错乱。
  3. 【回答框架 3】key 应在同一数组或迭代上下文中唯一,不同列表之间可以重复。key 不会作为 prop 传递给组件,React 会将其用作内部优化属性。
  4. 【回答框架 4】在组件重渲染时,key 变化会导致 React 卸载旧组件并重新挂载新组件,这可用于重置组件内部状态或强制重建组件。
  5. 【回答框架 5】使用稳定且唯一的 key 是 React 性能优化和避免状态异常的关键实践。
  6. 【关键点 1】key 用于在协调中标识元素,优化 DOM 更新。
  7. 【关键点 2】稳定唯一的 key 如 id 优于不稳定的索引。
  8. 【关键点 3】key 变化会触发组件卸载和重新挂载。
  9. 【关键点 4】key 不会传递给子组件,仅用于内部优化。
  10. 【易错点 1】使用数组索引作为 key 在列表排序或插入删除时可能导致状态错乱。
  11. 【易错点 2】在同一列表中 key 重复会导致渲染异常,不同列表间重复是允许的。