React:快速上手(3)——列表渲染

React:快速上手(3)——列表渲染

使用map循环数组

了解一些ES6

　　ES6， 全称 ECMAScript 6.0 ，是 JaveScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

详情查看菜鸟教程了解更多：http://www.runoob.com/w3cnote/es6-tutorial.html

Array.prototype.map()

 　　map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

使用Map进行列表渲染

const users = [
    { username: 'Jerry', age: 21, gender: 'male' },
    { username: 'Tomy', age: 22, gender: 'male' },
    { username: 'Lily', age: 19, gender: 'female' },
    { username: 'Lucy', age: 20, gender: 'female' }
  ]

  class Index extends React.Component{
      render(){
          return(
              <div>
                  {users.map((user)=>{
                      return(
                          <div>
                            <div>{user.username}</div>
                            <div>{user.age}</div>
                            <div>{user.gender}</div>
                            <hr/>
                          </div>
                      )
                  })}
              </div>
          )
      }
  }　　

抽离对象优化代码

　　我们可以将User单独抽取出来一个类，这样就不需要在Index里写太多的渲染代码，使得逻辑清晰一目了然。

 class Index extends React.Component{
      render(){
          return(
              <div>
                {users.map((user)=><User user={user}/>)}
              </div>
          )
      }
  }

  class User extends React.Component{
      render(){
          const{user} = this.props
          return(
            <div>
                <div>姓名：{user.username}</div>
                <div>年龄：{user.age}</div>
                <div>性别：{user.gender}</div>
                <hr />
            </div>
          )
      }
  }