一个小故事：React 的困惑
想象一下，你是 React，负责管理页面上的元素。有一天，你收到了一个任务：
这里有一个列表，你需要把它们显示出来，并且在 5 秒后添加一个新项到列表开头。
你信心满满地接下了任务，看看代码：
function App() {
const [todos, setTodos] = useState([
{ id: 1, title: '标题一' },
{ id: 2, title: '标题二' },
{ id: 3, title: '标题三' },
])
useEffect(() => {
setTimeout(() => {
setTodos(prev => [
{ id: 4, title: '标题-改四' },
...prev
])
}, 5000)
},[])
return (
<>
<ul>
{todos.map((todo, index) => (
<li key={ index }>{todo.title}</li>
))}
</ul>
</>
)
}
key 是 React 的「身份证」
在上面的代码中，你看到了 key={index} 这个奇怪的东西。这是什么？
其实， key 就像是元素的身份证。当 React 渲染列表时，它需要知道每个元素是谁，这样当数据变化时，它才能正确地更新页面。
没有 key 会发生什么？
如果没有 key，React 就会很困惑：
- 当你添加一个新元素时，React 可能会重新渲染所有元素，而不是只添加新元素
- 当你更新一个元素时，React 可能会更新错误的元素
- 当你删除一个元素时，React 可能会删除错误的元素 这就像是你去参加一个聚会，但是没有人佩戴名牌。当主人要找某个人时，他只能一个个问，效率很低。
为什么用 index 不是最好的选择？
在上面的代码中，我们使用了 index 作为 key。这虽然可行，但不是最好的选择。
为什么？因为当你改变列表的顺序时，index 也会改变。比如，当我们添加一个新元素到列表开头时，原来的第一个元素的 index 会从 0 变成 1，第二个元素的 index 会从 1 变成 2，以此类推。
这就像是你参加聚会时，主人根据你的座位位置来称呼你。当你换座位时，主人就会叫错你的名字。
什么是最好的 key？
最好的 key 是唯一且稳定的标识符。在我们的代码中，每个 todo 都有一个 id 属性，这就是一个很好的 key。
我们可以把代码改成这样：
{todos.map(todo => (
<li key={ todo.id }>{todo.title}</li>
))}
这样，即使列表的顺序改变，React 也能正确地识别每个元素。
总结
- key 是 React 识别元素的身份证
- 没有 key 会导致 React 困惑，降低性能
- 最好使用唯一且稳定的标识符作为 key
- 尽量避免使用 index 作为 key，尤其是当列表的顺序可能改变时 希望这篇文章能帮助你理解为什么 React 中的 key 如此重要！
