- Objective:
- Breadcrumb:
# 概念阐释
## 语义
`key` 相当于HTML中的`id`属性，为每个list定义了一个索引，为了防止React会意外打乱列表顺序，但如果不介意也可以不使用`key`。
需要使用`key`的情况：
- 例如一个待办事项列表，渲染时应记住哪些列表已被勾选
- 列表可能会被打乱顺序
# 实例
```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
const people = ['Rowe', 'Prevost', 'Gare'];
// 创建list列表
const peopleList = people.map((person,i) =>
<li key='{i}'> {person} </li>
);
render.root(<ul>{peopleList}</ul);
```
# 相关内容
# 参考资料
[Keys](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-jsx-752c2293-9f61-412a-92e2-70ad6e01a0a7/lessons/react-jsx-advanced/exercises/jsx-keys)