React列表渲染为什么必须添加key，其深层原因是什么？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1713个文字，预计阅读时间需要7分钟。
目录+为什么需要key？+列表渲染不提供key会怎样？+列表渲染的key用数组分组的索引会怎样？+应该用什么值作为key？+结尾+在React中我们经常需要渲染列表，比如展示好友列表。常用写法+
目录
- 为什么需要 key？
- 列表渲染不提供 key 会怎样？
- 列表渲染的 key 用数组索引会怎样？
- 应该用什么值作为 key？
- 结尾
在 React 中我们经常需要渲染列表，比如展示好友列表。
常用写法是用 Arrary.prototype.map 方法，将数组形式的数据映射为 JSX.Element 数组，并嵌入到组件要返回的 JSX.Element 中，如下：
function FriendList() { const [items, setItems] = useState(['易盾网络', '小明', '张三']); return ( <ul> {items.map((item) => ( <li key={item}>{item}</li> ))} </ul> ); }
你需要给每个项提供 key 属性作为标识，以区分不同的项。
本文共计1713个文字，预计阅读时间需要7分钟。
目录+为什么需要key？+列表渲染不提供key会怎样？+列表渲染的key用数组分组的索引会怎样？+应该用什么值作为key？+结尾+在React中我们经常需要渲染列表，比如展示好友列表。常用写法+
目录
- 为什么需要 key？
- 列表渲染不提供 key 会怎样？
- 列表渲染的 key 用数组索引会怎样？
- 应该用什么值作为 key？
- 结尾
在 React 中我们经常需要渲染列表，比如展示好友列表。
常用写法是用 Arrary.prototype.map 方法，将数组形式的数据映射为 JSX.Element 数组，并嵌入到组件要返回的 JSX.Element 中，如下：
function FriendList() { const [items, setItems] = useState(['易盾网络', '小明', '张三']); return ( <ul> {items.map((item) => ( <li key={item}>{item}</li> ))} </ul> ); }
你需要给每个项提供 key 属性作为标识，以区分不同的项。