React _ 列表

列表

JavaScript中的列表转换

如下所示，使用map()函数让数组中的每一项变成双倍，从而得到了一个新的数组对象。

> const numbers = [1, 2, 3, 4, 5];
> const doubled = numbers.map((number) => number * 2);
> doubled
[2, 4, 6, 8, 10]

运行一下

在React中，把数组转化为元素列表，也是类似上述过程。

批量渲染

将map()函数与JSX组合使用，即可批量渲染：

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

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

运行一下

用来批量渲染的组件

通过组件的方式来实现上述功能，且接收指定数组作为参数，从而使组件的复用度更高：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

运行一下

key属性

React元素中包含一个特殊的key属性，主要是用来标记元素，让React定位指定元素而用的。如下所示，为每一个列表元素分配一个key属性：

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')
);

运行一下

如下所示，也效果相同，但是拆分得更细：

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

运行一下

React元素同一个列表中元素的每个key必须是独一无二的字符串；但是key只是在兄弟节点之间是必须独一无二的，不同列表的元素的key是可以重复的。

列表

推广