七. React的列表(Lists)和键(keys)

一. 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>
 );
}