Lesson13渲染列表数据

1. 往 {} 放一个数组，React.js 会帮你把数组里面一个个元素罗列并且渲染出来

<ul>
    <li>{[1,2,3]}</li>
</ul>

展开效果

使用JSX标签包裹数组元素效果更佳

<ul>
    <li>{[<p>1</p>,<p>2</p>,<p>3</p>]}</li>
</ul>

展开效果

2. 使用for循环攒一个JSX数组，将该数组放入{}中即可自动展开

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>
    )
  }

3. 使用map遍历数据数组的话，map函数会将每次遍历的返回结果自动组装为一个数组，省却了for循环攒数组的步骤，更方便

render () {
    return (
      <div>
        {users.map((user) => {
          return (
            <div>
              <div>姓名：{user.username}</div>
              <div>年龄：{user.age}</div>
              <div>性别：{user.gender}</div>
              <hr />
            </div>
          )
        })}
      </div>
    )
  }

4. 给遍历过程产生的每个JSX标签元素添加key可极大降低列表操作的复杂度，所以react要求我们必须为每个元素添加唯一性标识key。