React列表渲染

我正在参加「掘金·启航计划」

随便说点

因为在真实开发中我们会从服务器请求到大量的数据，数据会以列表的形式存储，比如歌曲、歌手、排行榜列表的数据；比如商品、购物车、评论列表的数据；比如好友消息、动态、联系人列表的数据等等。

而在React中并没有像Vue模块语法中的v-for指令，而且需要我们通过JavaScript代码的方式组织数据，转成JSX，很多从Vue转型到React的同学非常不习惯，认为Vue的方式更加的简洁明了，但是React中的JSX正是因为和JavaScript无缝的衔接，让它可以更加的灵活，另外React是真正可以提高我们编写代码能力的一种方式。

那么如何展示列表呢？在React中，展示列表最多的方式就是使用数组的map高阶函数，很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理，比如过滤掉一些内容，那么就可以使用filter函数；比如截取数组中的一部分内容，那么可以使用slice函数。

React列表渲染案例一

实现的效果如下：

那么实现思路就是利用表格展示，而动态数据只有每一行的数据，因此可以先把table的框架搭好，很简单，只要按原来HTML那样写就行了。

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      message: 'React列表渲染案例一',
      students: [
        { id: 1, name: 'a', score: 79 },
        { id: 2, name: 'b', score: 88 },
        { id: 3, name: 'c', score: 94 },
        { id: 4, name: 'd', score: 78 },
        { id: 5, name: 'e', score: 66 },
      ]
    }
  }

  render() {
    const { message, students } = this.state;

    return (
      <div>
        <h2>{message}</h2>
        <table>
          <thead>
            <tr> 
              <th>ID</th>
              <th>Name</th>
              <th>Score</th>
            </tr>
          </thead>
          <tbody>
            
          </tbody>
        </table>
      </div>
    )
  }
}

写完后，页面上的结果是这样的：

那么接下来就是把每一行的数据动态写入，也就是在tbody中添加每一行的tr和td标签即可。可以想到用map函数来实现，也就是遍历students数组，然后更改返回值为我们所需要的JSX语法即可。

<tbody>
{
  students.map(item => {
    return (
      <tr>
        <td>{item.id}</td>
        <td>{item.name}</td>
        <td>{item.score}</td>
      </tr>
    )
  })
}
</tbody>

这样子，我们的列表渲染就完成啦 🎉。

React列表渲染案例二

变身成为产品经理 👨🏻‍💻，我们现在改变需求，只想展示分数大于90分的同学，那么很容易想到只要把上述的map前先用filter函数过滤即可。

<tbody>
{
  students.filter(item => item.score > 90).map(item => {
    return (
      <tr>
        <td>{item.id}</td>
        <td>{item.name}</td>
        <td>{item.score}</td>
      </tr>
    )
  })
}
</tbody>

最终实现的效果是这样的：

列表中的key

我们会发现在前面的代码中只要展示列表都会报一个警告：

这个警告是告诉我们需要在列表展示的jsx中添加一个key，key主要的作用是为了提高diff算法时的效率。

写在最后

如果大家喜欢的话可以收藏本专栏，之后会慢慢更新，然后大家觉得不错可以点个赞或收藏一下 🌟。

本节的源码放在作者的GitHub仓库里，分别是：

• React列表渲染案例一
• React列表渲染案例二