第九节：React列表渲染

如何实现?

如何实现遍历列表并渲染多个React元素呢，下面我们就来介绍React常用的方法

map()函数

直接在jsx中的{}使用即可

示例代码

const numbers = [1, 2,3,4,5];
return (
	<>
		{numbers.map(item=> <li key={number.toString()}>{item}</li>)}
	</>
)

键（Key）

Key可以帮助React标识哪个项被修改、新增、删除了。数据中的每个元素都应该有一个唯一的key来标识/

挑选key最好的方式，就是使用在同辈元素中不会重复的标识字符串，多数情况，我们推荐使用数据中的id. 不推荐使用数组的下标当作key。因为当删除中间的元素时，该下标以及后面的元素都会被认为为修改，都会进行对应的渲染。

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

要注意的是，key只是必须在同辈之间唯一，然后并不需要全局唯一。