企业官网建设流程全解析

13、ReactJS - Keys：从入门到企业级实战，一篇讲透列表渲染的灵魂

写在前面：在 React 的世界里，有一个属性看似不起眼，却几乎出现在每一个列表渲染的场景中。它就是key。很多开发者写了三五年 React，天天跟key打交道，却始终说不清它到底解决了什么问题、为什么不能用index、企业项目里到底该怎么选。本文将从真实痛点出发，逐层拆解 Key 的本质、原理、演进与最佳实践，让你读完既能跟面试官谈笑风生，也能在项目中写出经得起考验的列表代码。

一、痛点场景：那些被 Key 坑过的日夜

1.1 场景一：列表删除后输入框内容错位

假设你正在开发一个待办事项应用，每个列表项里都有一个可编辑的输入框。你信心满满地写下了如下代码：

import React, { useState } from 'react'; function TodoList() { const [todos, setTodos] = useState([ { id: 1, text: '学习 React' }, { id: 2, text: '学习 Vue' }, { id: 3, text: '学习 Angular' }, ]); const handleDelete = (index) => { setTodos(todos.filter((_, i) => i !== index)); }; return ( <ul> {todos.map((todo, index) => ( <li key={index}> <input defaultValue={todo.text} /> <button onClick={() => handleDelete(index)}>删除</button> </li> ))} </ul> ); } export default TodoList;

看起来一切正常。但当你在第二个输入框里输入了"今天要写完这篇文章"，然后点击删除第一项时，诡异的事情发生了：你输入的内容跑到了第一个输入框里，而原本第三个输入框的内容消失了。

这不是 React 的 bug，而是key={index}惹的祸。

1.2 场景二：列表头部插入数据导致全量重渲染

在一个消息流应用中，新消息总是插入到列表顶部。你用了index作为 key，每次收到新消息，整个列表一百多条数据全部重新渲染，页面明显卡顿，低端手机上甚至出现掉帧。

1.3 场景三：表单动态增删行，校验状态张冠李戴

企业后台的动态表单，用户可以增删表单项。每一行有独立的校验状态。用了index做 key 之后，删除中间一行，后面所有行的校验提示全部错位，明明通过了校验却显示红色错误，用户一头雾水。

1.4 场景四：动画列表元素错乱

做一个可拖拽排序的列表，拖拽结束后元素动画混乱，有的元素直接消失再出现，有的元素位置跳变，完全没有平滑过渡。

以上四个场景，根因都指向同一个问题：Key 选择不当。接下来我们逐层拆解。

二、痛点的解决方案：给每个元素一张身份证

解决上述问题的核心思路极其简单：不要用位置（index）来标识元素，而要用元素自身的唯一身份（id）来标识它。

把场景一中的代码改一行：

{/* 改前 */} <li key={index}> {/* 改后 */} <li key={todo.id}>

仅此一行改动，输入框错位、状态错乱、全量重渲染的问题全部迎刃而解。

但为什么一行key的改动有如此大的威力？这就要从 Key 的本质说起。

三、Key 是什么：专业解释、大白话与生活案例

3.1 专业解释

Key 是 React 用于追踪列表中哪些元素被修改、被添加或被移除的辅助标识。在 React 的协调（Reconciliation）算法中，当子元素拥有 key 时，React 使用 key 来匹配原有虚拟 DOM 树上的子元素与最新虚拟 DOM 树上的子元素，从而决定哪些组件实例可以复用、哪些需要重新创建、哪些需要移动位置。

Key 必须满足三个特质：

• 稳定的（Stable）：同一个元素在多次渲染之间 key 不能变化
• 唯一的（Unique）：在同级兄弟元素中 key 不能重复
• 可预测的（Predictable）：key 应该是确定的，不能是随机数

3.2 大白话解释

你可以把 React 的列表渲染想象成一个班级点名。

• 没有 key 的时候，老师只能按座位号点名：“第一排的同学回答一下”。如果有人换了座位，老师就会认错人。
• 有了 key 之后，老师按学号点名：“学号 2023001 的同学回答一下”。不管你换到哪个座位，老师都能准确找到你。

index就是座位号，id就是学号。座位会变，学号永远不变。

3.3 生活案例

去银行办业务，取号机给你一个排队号码。这个号码就是你的"临时 key"，它只在你这次排队期间有效，下一次来就是另一个号了。

但你的身份证号是"永久 key"，不管你去哪家银行、哪个窗口、排第几个，银行系统都能通过身份证号准确识别你这个人。

React 的 key 就应该是身份证号，而不是排队号码。

3.4 中国古代典故

《三国演义》中，曹操在长坂坡被张飞喝退之后，追击刘备时陷入混乱。如果曹军每个士兵都有唯一的兵符编号（key），将领就能快速清点哪些人还在、哪些人阵亡、哪些人掉队了。如果只按队列位置（index）清点，一旦阵型打乱，就完全搞不清谁是谁了。

Key 的本质，就是在动态变化中保持身份的确定性。

四、为什么要用 Key：没有 Key 的世界会怎样

4.1 React 的 Diff 算法基础

React 的协调算法基于两个假设：

1. 两个不同类型的元素会产生不同的树
2. 开发者可以通过key属性暗示哪些子元素在不同渲染之间是稳定的

在没有 key 的情况下，React 对列表子元素的比较策略是按位置逐一对比。也就是说，旧列表的第一个元素和新列表的第一个元素比，第二个和第二个比，以此类推。

4.2 没有 Key 时的更新过程

假设初始列表是：

<ul> <li>Java</li> <li>Python</li> </ul>

现在在头部插入一个新元素，变成：

<ul> <li>JavaScript</li> <li>Java</li> <li>Python</li> </ul>

没有 key 时，React 的对比过程：

• 旧第一个<li>Java</li>vs 新第一个<li>JavaScript</li>→ 内容不同，更新 DOM
• 旧第二个<li>Python</li>vs 新第二个<li>Java</li>→ 内容不同，更新 DOM
• 新第三个<li>Python</li>→ 旧列表没有，创建新 DOM

结果：两次更新 + 一次创建，原本只需要插入一个元素，结果三个元素全动了。

4.3 有 Key 时的更新过程

<ul> <li key="js">JavaScript</li> <li key="java">Java</li> <li key="python">Python</li> </ul>

有 key 时，React 的对比过程：

• 找到 key=“java” 的元素，新旧都有 → 复用，位置移动
• 找到 key=“python” 的元素，新旧都有 → 复用，位置移动
• key=“js” 是新增的 → 创建新 DOM

结果：一次创建 + 两次移动，已有的 DOM 节点完全复用，只需要处理新增的那个。

4.4 对组件状态的影响

这是最容易被忽略的一点。Key 不仅影响 DOM 操作，还影响组件实例的复用与状态保持。

当 key 相同时，React 认为是同一个组件实例，会保留其内部 state（包括非受控 input 的值、useState 的数据等），只更新 props。

当 key 不同时，React 认为是不同的组件实例，会卸载旧组件、挂载新组件，所有内部 state 全部重置。

这就是为什么用index做 key 时，删除一行会导致输入框内容错位：React 复用了错误的组件实例，把旧位置的 state 带到了新位置上。

五、Key 是怎么演进过来的：从无到有的设计之路

5.1 史前时代：React 0.3 之前

React 最早的版本（2013 年开源时的 0.3 版本之前）并没有 key 的概念。那时候列表更新完全依赖按位置对比，列表一旦发生插入、删除、排序，性能就急剧下降，状态错乱更是家常便饭。

5.2 引入 Key：React 0.11 时代

React 团队很快意识到了这个问题。在 2014 年的 0.11 版本中，正式引入了key属性。开发者可以为列表中的每个元素指定一个稳定标识，React 的协调器据此精准匹配元素，大幅提升了动态列表的更新效率。

这是 React 协调算法历史上的一个关键设计决策：用开发者提供的"提示信息"来弥补通用 Diff 算法的先天不足。

5.3 Stack Reconciler 时代：React 15 及之前

在 React 16 之前，React 使用的是 Stack Reconciler（栈协调器）。这个版本的协调过程是同步的、不可中断的。Key 在这个阶段的作用主要是优化 DOM 操作次数，减少不必要的节点创建和销毁。

React 15 还做了一个重要改动：用document.createElement替代了innerHTML来挂载组件，去掉了每个节点上的data-reactid属性，让 DOM 更轻量。Key 的匹配逻辑从依赖 DOM 属性转向了纯虚拟 DOM 层面的对比。

5.4 Fiber 架构时代：React 16 至今

2017 年 React 16 发布，底层架构从 Stack Reconciler 重写为 Fiber Reconciler。Fiber 架构将协调过程拆分为可中断的单元，支持时间切片和优先级调度。

在 Fiber 架构下，Key 的作用变得更加重要：

• Fiber 节点的创建和复用直接依赖 key 进行匹配
• 可中断的渲染过程中，key 保证了元素身份在多次调度间的一致性
• 并发模式下，key 的稳定性直接影响渲染的正确性

React 官方文档在新版（react.dev）中专门强调：“Keys must not change or that defeats their purpose. Don’t generate them while rendering.”（Key 不能改变，否则就失去了意义。不要在渲染过程中生成 key。）

5.5 演进的核心逻辑

回顾整个演进历程，Key 的设计哲学始终没变：把"哪个元素是谁"的判断权交给最了解数据的开发者，而不是让框架去猜。这是一种典型的"约定优于配置"与"显式优于隐式"之间的平衡。

六、怎么用 Key：从基础语法到企业级实战

6.1 基础用法

最标准的用法是使用数据中自带的唯一标识：

function UserList({ users }) { return ( <ul> {users.map((user) => ( <li key={user.id}> {user.name} - {user.email} </li> ))} </ul> ); }

6.2 没有唯一 ID 时的处理方案

不是所有数据都有数据库 ID。以下是几种常见的兜底方案，按推荐程度排序。

方案一：组合字段生成唯一 key

function OrderList({ orders }) { return ( <ul> {orders.map((order) => ( <li key={`${order.userId}-${order.productId}-${order.timestamp}`}> {order.productName} </li> ))} </ul> ); }

方案二：在数据层预处理时注入稳定 ID

// 从接口拿到数据后，在 store 或数据转换层注入稳定 keyfunctionnormalizeList(rawList){returnrawList.map((item,index)=>({...item,_stableKey:`${item.type}_${item.code}_${index}`,}));}

方案三：使用 nanoid / uuid 生成稳定 key（仅在初始化时）

npminstallnanoid

import { nanoid } from 'nanoid'; function App() { // 只在组件初始化或数据首次加载时生成，不要在 render 中生成 const [items, setItems] = useState(() => Array.from({ length: 5 }, (_, i) => ({ id: nanoid(), label: `选项 ${i + 1}`, })) ); const addItem = () => { setItems([...items, { id: nanoid(), label: `选项 ${items.length + 1}` }]); }; return ( <div> <ul> {items.map((item) => ( <li key={item.id}>{item.label}</li> ))} </ul> <button onClick={addItem}>添加一项</button> </div> ); }

方案四：万不得已才用 index（静态列表专用）

// 仅当列表完全静态、永不变更顺序、永不增删时，才可以用 index const WEEKDAYS = ['周一', '周二', '周三', '周四', '周五']; function WeekdaySelector() { return ( <select> {WEEKDAYS.map((day, index) => ( <option key={index} value={day}> {day} </option> ))} </select> ); }

6.3 企业项目实战一：可编辑表格行

这是企业后台最常见的场景之一。动态表格，每行可编辑，支持增删。

import React, { useState, useCallback } from 'react'; // 行数据类型定义 interface TableRow { rowKey: string; // 稳定唯一标识 name: string; age: number; email: string; } // 生成稳定 key 的工具函数 const generateRowKey = () => `row_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`; function EditableTable() { const [rows, setRows] = useState<TableRow[]>([ { rowKey: generateRowKey(), name: '张三', age: 28, email: 'zhangsan@example.com' }, { rowKey: generateRowKey(), name: '李四', age: 32, email: 'lisi@example.com' }, ]); const handleFieldChange = useCallback((rowKey: string, field: keyof TableRow, value: string | number) => { setRows((prev) => prev.map((row) => row.rowKey === rowKey ? { ...row, [field]: value } : row ) ); }, []); const handleAddRow = useCallback(() => { setRows((prev) => [ ...prev, { rowKey: generateRowKey(), name: '', age: 0, email: '' }, ]); }, []); const handleDeleteRow = useCallback((rowKey: string) => { setRows((prev) => prev.filter((row) => row.rowKey !== rowKey)); }, []); return ( <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> {rows.map((row) => ( <tr key={row.rowKey}> <td> <input value={row.name} onChange={(e) => handleFieldChange(row.rowKey, 'name', e.target.value)} /> </td> <td> <input type="number" value={row.age} onChange={(e) => handleFieldChange(row.rowKey, 'age', Number(e.target.value))} /> </td> <td> <input value={row.email} onChange={(e) => handleFieldChange(row.rowKey, 'email', e.target.value)} /> </td> <td> <button onClick={() => handleDeleteRow(row.rowKey)}>删除</button> </td> </tr> ))} </tbody> <tfoot> <tr> <td colSpan={4}> <button onClick={handleAddRow}>新增一行</button> </td> </tr> </tfoot> </table> ); } export default EditableTable;

关键点说明：

• rowKey在数据创建时生成，与行数据绑定，不随位置变化
• 删除操作基于rowKey过滤，而不是 index
• 更新操作基于rowKey定位，确保状态精准对应

6.4 企业项目实战二：虚拟滚动大列表

当列表数据量达到几千甚至上万条时，需要用虚拟滚动。此时 key 的选择直接影响滚动性能。

import React, { useRef, useState, useCallback, useEffect } from 'react'; interface ListItem { id: number; // 后端返回的唯一 ID title: string; content: string; } interface VirtualListProps { items: ListItem[]; itemHeight: number; containerHeight: number; } function VirtualList({ items, itemHeight, containerHeight }: VirtualListProps) { const containerRef = useRef<HTMLDivElement>(null); const [scrollTop, setScrollTop] = useState(0); const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => { setScrollTop(e.currentTarget.scrollTop); }, []); const startIndex = Math.floor(scrollTop / itemHeight); const visibleCount = Math.ceil(containerHeight / itemHeight); const endIndex = Math.min(startIndex + visibleCount + 2, items.length); const visibleItems = items.slice(startIndex, endIndex); const totalHeight = items.length * itemHeight; const offsetY = startIndex * itemHeight; return ( <div ref={containerRef} onScroll={handleScroll} style={{ height: containerHeight, overflow: 'auto', position: 'relative' }} > <div style={{ height: totalHeight, position: 'relative' }}> <div style={{ transform: `translateY(${offsetY}px)` }}> {visibleItems.map((item) => ( <div key={item.id} style={{ height: itemHeight, boxSizing: 'border-box', padding: '8px 12px', borderBottom: '1px solid #eee' }} > <h4>{item.title}</h4> <p>{item.content}</p> </div> ))} </div> </div> </div> ); } export default VirtualList;

关键点说明：

• 虚拟滚动只渲染可视区域内的元素，但key必须使用数据的真实id，而不是可视区域内的相对 index
• 如果用相对 index，快速滚动时 React 会频繁卸载和挂载组件，导致滚动卡顿
• 用真实 id 后，React 可以最大程度复用已经创建的 DOM 节点

6.5 企业项目实战三：拖拽排序列表

拖拽排序是 key 稳定性的终极考验场景。

import React, { useState } from 'react'; interface DragItem { id: string; text: string; } function DragSortList() { const [items, setItems] = useState<DragItem[]>([ { id: 'task-001', text: '需求评审' }, { id: 'task-002', text: '接口开发' }, { id: 'task-003', text: '联调测试' }, { id: 'task-004', text: '上线部署' }, ]); const [draggedId, setDraggedId] = useState<string | null>(null); const handleDragStart = (e: React.DragEvent, id: string) => { setDraggedId(id); e.dataTransfer.effectAllowed = 'move'; }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }; const handleDrop = (e: React.DragEvent, targetId: string) => { e.preventDefault(); if (!draggedId || draggedId === targetId) return; setItems((prev) => { const draggedIndex = prev.findIndex((item) => item.id === draggedId); const targetIndex = prev.findIndex((item) => item.id === targetId); const newItems = [...prev]; const [draggedItem] = newItems.splice(draggedIndex, 1); newItems.splice(targetIndex, 0, draggedItem); return newItems; }); setDraggedId(null); }; return ( <ul> {items.map((item) => ( <li key={item.id} draggable onDragStart={(e) => handleDragStart(e, item.id)} onDragOver={handleDragOver} onDrop={(e) => handleDrop(e, item.id)} style={{ padding: '12px', margin: '4px 0', border: '1px solid #ddd', cursor: 'move', background: draggedId === item.id ? '#e6f7ff' : '#fff', transition: 'transform 0.2s ease', }} > {item.text} </li> ))} </ul> ); } export default DragSortList;

关键点说明：

• 拖拽排序后数组顺序完全改变，如果用 index 做 key，所有元素都会被 React 认为是"新元素"，动画和状态全部丢失
• 用item.id做 key，React 能准确识别每个元素只是位置变了，从而触发 CSS transition 实现平滑的位置移动动画

6.6 Key 使用的红线清单

以下做法在任何情况下都应该避免：

// 红线一：在 render 中用随机数做 key {items.map((item) => ( <div key={Math.random()}>{item.text}</div> ))} // 红线二：在 render 中用 Date.now() 做 key {items.map((item) => ( <div key={Date.now()}>{item.text}</div> ))} // 红线三：用对象引用做 key（每次渲染都是新对象） {items.map((item) => ( <div key={item}>{item.text}</div> ))} // 红线四：key 重复 {items.map((item) => ( <div key="same-key">{item.text}</div> ))}

这些做法会导致每次渲染所有组件都被卸载重建，性能极差，状态完全丢失。

七、竞品对比：React、Vue、Angular 的 Key 机制

虽然三大框架都有 Key 的概念，但在实现细节和设计哲学上存在显著差异。

7.1 核心差异对比表

7.2 React vs Vue：Diff 算法的本质区别

React 的策略：从左到右单端遍历。有 key 时，先建立旧 key 到 index 的映射表，然后遍历新列表，通过 key 查映射表判断是移动、新增还是删除。实现简单，性能够用，但在列表完全反转等场景下移动次数不是最优。

Vue 2 的策略：双端对比。同时从旧列表首尾和新列表首尾四个方向进行匹配，尽量找到可以复用的节点，减少移动次数。在列表反转等场景下比 React 更高效。

Vue 3 的策略：在双端预处理的基础上，引入最长递增子序列算法，找到不需要移动的最长稳定序列，只移动必要的元素，理论上达到移动次数的最优解。

7.3 代码对比：同一个列表在三大框架中的写法

React：

function UserList({ users }) { return ( <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }

Vue 3：

<template> <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} </li> </ul> </template> <script setup lang="ts"> interface User { id: number; name: string; } defineProps<{ users: User[] }>(); </script>

Angular：

// user-list.component.tsimport{Component,Input}from'@angular/core';interfaceUser{id:number;name:string;}@Component({selector:'app-user-list',template:`<ul> <li *ngFor="let user of users; trackBy: trackByUserId"> {{ user.name }} </li> </ul>`,})exportclassUserListComponent{@Input()users:User[]=[];trackByUserId(index:number,user:User):number{returnuser.id;}}

7.4 总结

三大框架在 Key 的核心理念上是一致的：用稳定的唯一标识来追踪元素身份。差异主要体现在 Diff 算法的实现精细度和语法形式上。对开发者而言，无论用哪个框架，"优先使用业务 ID、避免用 index、保持 key 稳定"这三条原则都是通用的。

八、常用场景教学：Key 在真实项目中的典型应用

8.1 场景一：条件渲染中用 key 强制重置组件状态

有时候你希望某个 prop 变化时，组件完全重新初始化（重置所有内部 state）。这时可以巧妙地利用 key：

function UserProfile({ userId }: { userId: string }) { // userId 变化时，整个 ProfileEditor 重新挂载，内部 state 全部重置 return <ProfileEditor key={userId} userId={userId} />; }

这比在useEffect里手动重置所有 state 要干净得多，是 React 官方推荐的"重置 state"方案。

8.2 场景二：动画过渡中用 key 触发进入/离开动画

配合 React Transition Group 或 Framer Motion，key 的变化可以精确触发动画：

import { AnimatePresence, motion } from 'framer-motion'; function ToastContainer({ toasts }: { toasts: Array<{ id: string; message: string }> }) { return ( <div className="toast-container"> <AnimatePresence> {toasts.map((toast) => ( <motion.div key={toast.id} initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.3 }} > {toast.message} </motion.div> ))} </AnimatePresence> </div> ); }

8.3 场景三：列表筛选与搜索

筛选后的列表顺序和内容都可能变化，key 必须保持稳定：

function SearchableList({ items }: { items: Array<{ id: number; name: string; category: string }> }) { const [keyword, setKeyword] = useState(''); const [category, setCategory] = useState('all'); const filteredItems = items.filter((item) => { const matchKeyword = item.name.toLowerCase().includes(keyword.toLowerCase()); const matchCategory = category === 'all' || item.category === category; return matchKeyword && matchCategory; }); return ( <div> <input value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="搜索..." /> <select value={category} onChange={(e) => setCategory(e.target.value)}> <option value="all">全部</option> <option value="tech">技术</option> <option value="design">设计</option> </select> <ul> {filteredItems.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }

注意：筛选后虽然列表变了，但每个元素的id不变，React 能正确复用组件实例。

8.4 场景四：分页列表加载更多

function PaginatedList() { const [page, setPage] = useState(1); const [items, setItems] = useState<Array<{ id: number; title: string }>>([]); const [loading, setLoading] = useState(false); const loadMore = async () => { setLoading(true); const nextPage = page + 1; const data = await fetch(`/api/items?page=${nextPage}&pageSize=20`).then((res) => res.json()); setItems((prev) => [...prev, ...data.list]); setPage(nextPage); setLoading(false); }; return ( <div> <ul> {items.map((item) => ( <li key={item.id}>{item.title}</li> ))} </ul> <button onClick={loadMore} disabled={loading}> {loading ? '加载中...' : '加载更多'} </button> </div> ); }

分页加载的关键是：新追加的数据和已有数据的 id 不能重复，否则 key 冲突会导致渲染异常。

8.5 场景五：嵌套列表的 key

嵌套列表中，每一层的 key 只需要在当前层级唯一即可，不需要全局唯一：

function CategoryTree({ categories }: { categories: Array<{ id: number; name: string; children: Array<{ id: number; name: string }>; }>; }) { return ( <ul> {categories.map((category) => ( <li key={category.id}> {category.name} <ul> {category.children.map((child) => ( <li key={child.id}>{child.name}</li> ))} </ul> </li> ))} </ul> ); }

React 官方文档明确说明：“Keys only need to be unique among siblings.”（Key 只需要在兄弟元素中唯一。）不同层级、不同数组中的 key 可以重复。

九、面试官高频面试题

9.1 第一题：React 中 key 的作用是什么？

参考答案：

Key 是 React 用于追踪列表元素身份的辅助标识。在协调（Reconciliation）过程中，React 通过 key 来匹配新旧虚拟 DOM 树中的子元素，判断哪些元素是新增的、哪些被删除了、哪些只是位置移动了。正确的 key 能让 React 精准复用 DOM 节点和组件实例，减少不必要的重渲染，同时保持组件内部状态的正确性。

9.2 第二题：为什么不能用 index 作为 key？

参考答案：

用 index 作为 key 在列表静态时不会有问题，但当列表发生插入、删除、排序等改变元素顺序的操作时，会引发两个严重问题：

第一，性能问题。在列表头部插入元素时，所有后续元素的 index 都会变化，React 会认为所有元素的 key 都变了，导致大量不必要的组件更新和 DOM 操作。

第二，状态错乱。React 基于 key 复用组件实例，index 变化后，React 会把旧位置的组件实例复用到新位置上，导致组件内部 state（如非受控 input 的值、useState 数据）与数据错位。

只有当列表是完全静态的、永远不会改变顺序和长度时，才可以考虑用 index 做 key。

9.3 第三题：key 可以是随机数吗？为什么？

参考答案：

绝对不可以。如果在渲染过程中用Math.random()或Date.now()生成 key，每次渲染时每个元素的 key 都不一样，React 会认为所有元素都是全新的，导致每次渲染都卸载所有旧组件、挂载所有新组件，性能极差，且所有组件内部状态完全丢失。

Key 必须是稳定的、可预测的，同一个元素在多次渲染之间 key 必须保持一致。

9.4 第四题：React 的 Diff 算法中 key 是如何被使用的？

参考答案：

React 的 Diff 算法在处理列表子元素时，分为有 key 和无 key 两种情况：

无 key 时，React 按位置逐一对比新旧子元素，旧第一个比新第一个，旧第二个比新第二个，以此类推。

有 key 时，React 先遍历旧子元素列表，建立一个 key 到旧元素 index 的映射表（Map）。然后遍历新子元素列表，对每个新元素用它的 key 去映射表中查找：

• 找到了 → 说明是已有元素，复用对应的 Fiber 节点和 DOM，可能需要移动位置
• 没找到 → 说明是新增元素，创建新的 Fiber 节点和 DOM
• 旧列表中有但新列表中没有的 key → 说明是被删除的元素，标记删除

这个过程的时间复杂度是 O(n)，其中建立映射表是 O(n)，遍历新列表查找也是 O(n)。

9.5 第五题：React 和 Vue 的 key 机制有什么区别？

参考答案：

核心理念相同，都是用稳定标识追踪元素身份。区别主要在 Diff 算法实现上：

• React 采用单端从左到右的顺序遍历策略，有 key 时通过映射表匹配元素，实现简单，性能够用
• Vue 2 采用双端交叉对比策略，同时从首尾四个方向匹配，在列表反转等场景下移动次数更少
• Vue 3 在双端对比基础上引入最长递增子序列（LIS）算法，最小化 DOM 移动次数，理论最优

另外，React 的 key 直接影响 Fiber 节点的复用，而 Vue 的 key 更偏向于 VNode 和 DOM 层面的复用优化。

9.6 第六题：如果数据中没有唯一 ID，应该怎么处理？

参考答案：

按优先级排序有以下方案：

1. 组合字段：用多个字段拼接成唯一标识，如${userId}-${orderId}-${timestamp}
2. 数据层注入：在数据从接口返回后、进入组件之前，为每条数据生成一个稳定的唯一标识并挂载到数据上
3. 初始化时生成：在useState的初始化函数或useMemo中，用 nanoid/uuid 为每条数据生成稳定 id，注意只在初始化时生成一次，不要在 render 中生成
4. 静态列表兜底：只有完全静态的列表才可以用 index

9.7 第七题：key 重复会怎么样？

参考答案：

React 会在控制台输出警告：“Encountered two children with the same key”。当 key 重复时，React 的映射表中后出现的元素会覆盖先出现的，导致 React 无法正确追踪元素身份，可能出现渲染异常、状态错乱、元素丢失等不可预测的行为。必须保证同级兄弟元素中 key 的唯一性。

9.8 第八题：如何利用 key 来强制重置组件状态？

参考答案：

当需要在某个 prop 变化时完全重置组件内部状态，可以将该 prop 作为组件的 key。key 变化时，React 会卸载旧组件实例并挂载新的，所有内部 state 自动重置。这比在 useEffect 中手动重置多个 state 更简洁可靠，也是 React 官方文档推荐的方案。

十、总结

Key 是 React 列表渲染中最基础也最容易被忽视的属性。它的本质是为动态变化的元素提供稳定的身份标识，让 React 的协调算法能够精准地判断元素的增删改移，从而实现高效的 DOM 更新和正确的状态保持。

回顾全文的核心要点：

1. Key 的三原则：稳定、唯一、可预测
2. Index 的两大罪：性能下降 + 状态错乱
3. 企业级选型：优先业务 ID，次选组合字段，静态列表才用 index
4. 三大框架共识：稳定标识追踪身份，Diff 算法各有千秋
5. 面试核心：Diff 过程、index 危害、key 稳定性、强制重置技巧

记住一句话：Key 是元素的身份证，不是座位号。写列表时先问自己一句：这个 key 在数据变化后还能准确找到同一个元素吗？如果答案是否定的，就换一个。

本文为原创文章，如需转载，请联系作者获得授权，并注明出处。