react小书，怎么渲染列表（react）

在我们处理数据时，假如我们现在有一个用户列表存放到数组中

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' }
]

 现在想要将数组里面的数据渲染到我们的页面上时需要怎么做呢，在之前读react的小书时表达式中插入{}里面可以存放任何数据，如果我们将jsx里面塞入一个数组，这个数组里面放了一些jsx的元素可以看到会正常显示

那么将数组对象存放到我们的{}中

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 Component {
  render () {
    const usersElements = [] // 保存每个用户渲染以后 JSX 的数组
    for (let user of users) {
      usersElements.push( // 循环每个用户，构建 JSX，push 到数组中
        <div>
          <div>姓名：{user.username}</div>
          <div>年龄：{user.age}</div>
          <div>性别：{user.gender}</div>
          <hr />
        </div>
      )
    }
    return (
      <div>{usersElements}</div>
    )
  }
}
ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

就可以进行如下的处理

通过for of语句来进行遍历，将我们的jsx进行罗列渲染

但是在一般情况下不会手动来写循环来构建jsx的结构，一般会用es6中自带的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 User extends Component {
  render () {
    const { user } = this.props
    return (
      <div>
        <div>姓名：{user.username}</div>
        <div>年龄：{user.age}</div>
        <div>性别：{user.gender}</div>
        <hr />
      </div>
    )
  }
}
class Index extends Component {
  render () {
    return (
      <div>
        {users.map((user) => <User user={user} />)}
      </div>
    )
  }
}
ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

这里通过在render中来进行map遍历调用user组件，在user组件中来进行属性的调用

在我们的列表渲染中我们需要给react一个key来理解我们的列表，需要对元素来进行唯一的标识