React-数据列表渲染学习

数据列表渲染

数据列表处理使我们常见的事物类型，到后台给你一串数据列表，你将如何展示在前端页面上呢，传统的我们都是通过循环来实现，那么在react里面我们又是怎样实现的呢？

• 数据如下

  const books = [
    { bookname: '1', time: '一号',},
    { bookname: '2', time: '二号'},
    { bookname: '3', time: '三号'},
    {bookname: '4', time: '四号'}
  ];
  

• 实现一
  我们使用for循环

  • 先用一个数组来存放你的数据

     const booksElements = [] // 保存每本书渲染以后 JSX 的数组
    

  • 在用for循环来取出来，再加到我们刚刚定义好的数组里面，然后返回给页面。

     for (let book of books) {
          booksElements.push( // 循环每本书，构建 JSX，push 到数组中
            <div>
              <div>书名：{book.bookname}</div>
              <div>出版时间：{book.time}</div>
              <hr />
            </div>
          )
        }
    

    然后直接用表达式插入到页面。

• 实现二
  我们可以使用ES6的map数据结构来遍历列表数据，

  {books.map((book) => {
            return (
              <div>
                <div>书名：{book.bookname}</div>
                <div>出版时间：{book.time}</div>
                <hr />
              </div>
            )
          })}
  

• 实现三
  根据实现二，我们可以把每一个数据的结构抽离出来，形成一个独立的组件

  const { book } = this.props
      return (
        <div>
          <div>书名：{book.bookname}</div>
                <div>出版时间：{book.time}</div>
                <hr />
        </div>
      )
  

  然后在主组件中套如该组件

  return (
        <div>
          {books.map((book) => <Book book={book} />)}
        </div>
      )
  

  然后渲染到页面

• 接下来我们给每一个数据加上key，其实我们在后台获取来的数据都是有一个id的，但是这里我们为了能测试成功，我们就给他一个数，通过循计数i作为key

  return (
        <div>
          {books.map((book, i) => <Book key={i} book={book} />)}
        </div>
      )
  

• 总结
  像这种列表数据的处理，我们一般都采用循环遍历的方式，在传统的前端业务中，我们是将通过ajax请求来的数据通过一个循环来加入到拼接字符串模板中去，然后在加入到前端页面。然而在React中，组件这个核心实现起来让我们的逻辑更清晰，react因为组件的原因，我们可以把每一条数据都抽离为一个独立的组件，然后在通过组件嵌套的原理加入到需要的页面，同时，react的列表数据渲染也把ES6 map数据的遍历功能发挥的很好。我是看了一个课程过来的，课程原文如下：http://huziketang.com/books/react/lesson13