React基础之列表（Lists）和键（Keys）

七月 03, 2018 4397

本篇我们来认识一下 react 中的列表（Lists）和键（Keys）。首先让我们回顾一下在 JavaScript 中如何转换列表。

我们知道，在 JavaScript 中 map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。如：

1
2
3
4
5
6
7
/*返回一个数组，数组中元素为原始数组的平方根*/
var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

在 React 中，转换数组为 元素列表 的方式，和上述方法基本相同。

列表（Lists）

多组件渲染

可以创建元素集合，并用一对大括号 {} 在 JSX 中直接将其引用即可。

下面，我们用 JavaScript 的 map() 函数将 numbers 数组循环处理。对于每一项，我们返回一个

  • 元素。最终，我们将结果元素数组分配给 listItems：

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

    把整个 listItems 数组包含到一个

      元素，并渲染到 DOM：

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

      这样就可以创建出一个列表元素了，包含 5 个 li 元素的列表。

      基本列表组件

      上面的例子只是简单的元素列表的创建过程，而在 React 中，往往我们使用的是组件列表的创建，我们可以简单改造上面的例子。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      function ListItem(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(
        <ListItem numbers={numbers} />,
        document.getElementById('root')
      );

      这样就转化成了基本的 React 的组件形式了。

      ❤ 当运行上述代码的时候，将会收到一个警告：图片描述这个警告在非 min 版本的就可以看到。当创建元素列表时，“key” 是一个你需要包含的特殊字符串属性，下面会有说明。

      键（Keys）

      上面的例子中出现的警告告诉我们数组中的每一个元素都需要一个“key”（键）来进行标识。键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。有点类似于元素的唯一标识，相信会比较好理解。

      挑选 key 最好的方式是使用一个在它的同辈元素中不重复的标识字符串。多数情况你可以使用数据中的 IDs 作为 keys：

      1
      2
      3
      4
      5
      const todoItems = todos.map((todo) =>
        <li key={todo.id}>
          {todo.text}
        </li>
      );

      当要渲染的列表项中没有稳定的 IDs 时，你可以使用数据项的索引值作为 key 的最后选择：

      1
      2
      3
      4
      5
      6
      const todoItems = todos.map((todo, index) =>
        // 只是当列表元素没有稳定的ids时使用索引index
        <li key={index}>
          {todo.text}
        </li>
      );

      ❤ 如果列表项可能被重新排序时，我们不建议使用索引作为 keys，因为这导致一定的性能问题，会很慢。

      使用 keys 提取组件

      keys 只在数组的上下文中存在意义。例如，如果你提取 一个 ListItem 组件，应该把 key 放置在数组处理的 元素中，不能放在 ListItem 组件自身中的

    • 根元素上。

      例子：错误的 key 用法

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      function ListItem(props) {
        const value = props.value;
        return (
          // 错误！不需要在这里指定 key：
          <li key={value.toString()}>
            {value}
          </li>
        );
      }

      function NumberList(props) {
        const numbers = props.numbers;
        const listItems = numbers.map((number) =>
          // 错误！key 应该在这里指定：
          <ListItem value={number} />
        );
        return (
          <ul>
            {listItems}
          </ul>
        );
      }

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

      例子：正确的 key 用法

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      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>
        );
      }

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

      ❤ 一个好的经验准则是元素中调用 map() 需要 keys 。因为列表都会通过 map()方法进行实现。

      keys 在同辈元素中必须是唯一的

      在数组中使用的 keys 必须在它们的同辈之间唯一。然而它们并不需要全局唯一。我们可以在操作两个不同数组的时候使用相同的 keys。也就是说，在一个列表中选取 keys 时，这个属性需要在数组中的元素中是唯一的，不会重复，具有唯一性。这也和我们常规见到的 key（键值、主键）的概念是一致的。

      keys 的内部性

      键是 React 的一个内部映射，但其不会传递给组件的内部。如果你需要在组件中使用相同的值，可以明确使用一个不同名字的 prop 传入。

      1
      2
      3
      4
      5
      6
      const content = posts.map((post) =>
        <Post
          key={post.id}
          id={post.id}
          title={post.title} />
      );

      如上面的例子，在组件 Post 中可以通过 props.id 获取值，但是无法获取 props.key 的值。

      在 JSX 中嵌入 map()

      JSX 允许在大括号中嵌入任何表达式，因此可以 内联 map()：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      function NumberList(props) {
        const numbers = props.numbers;
        return (
          <ul>
            {numbers.map((number) =>
              <ListItem key={number.toString()}
                        value={number} />
            )}
          </ul>
        );
      }

      有时这可以产生清晰的代码，但是这个风格也可能被滥用。就像在 JavaScript 中，是否有必要提取一个变量以提高程序的可读性，这取决于你。但是记住，如果 map() 体中有太多嵌套，可能是提取组件的好时机。总之要在适当的时机使用组件，这样就能使你的结构更加的清晰。

    • 查看评论