一. Lists
在React中，转换数组为元素列表的方式，和JavaScript相似，即用map()方法。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
基本列表组件
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
二. 键(Keys)
键(Keys) 是React列表中非常重要的一个属性，它可以帮助 React 标识哪个项被修改、添加或者移除了，从而来进行重新渲染。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识。
注：key值最好为同辈元素中不重复的表示字符串。多数情况下是用数据中的ID或者若没有id，则以map时的index作为key值。
以ID为key值：
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
以index为值：
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
使用keys提取组件：
keys只在数组的上下文中存在意义。如果你提取 一个 ListItem 组件，应该把 key 放置在数组处理的 <ListItem /> 元素中，不能放在 ListItem 组件自身中的 <li> 根元素上。
function ListItem(props) {
// 正确！这里不需要指定 key ：
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 正确！key 应该在这里被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
keys 在同辈元素中必须是唯一的:
在同一数组间使用的keys必须是同辈唯一的，但不是全局唯一，可以在两个不同的数组的使用相同的keys。
注：键是React的一个内部映射，不会传递给组件的内部。如果需要在组建中使用相同的值，可以明确使用一个不同名字的props传入。
三.在JSX中嵌入map()
JSX允许在大括号中嵌入任何表达式，因此可以内联map()：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
