JSX 列表渲染

学习目标： 能够在 JSX 中实现列表渲染

页面的构建离不开重复的列表结构，比如歌曲列表，商品列表等等，Vue 中用的式 v-for 做到这一点，react 中又该如何实现呢？

实现： 使用数组的 map 方法
案例:

// 技术方案：map 重复渲染的是哪个模板 就return那个
// 注意事项：遍历列表时同样需要一个类似number/string不可重复的key 提高diff性能
// key仅仅在内部使用，不会出现在真实的dom结构
const stu = [
  { id: 1, name: '小明', age: 18 },
  { id: 2, name: '李华', age: 19 },
  { id: 3, name: '小红', age: 17 },
  { id: 4, name: '小芳', age: 17 },
]

return (
  <div className="App">
    <ul>
      {stu.map((item) => (
        <li key={item.id}>
          姓名：{item.name},年龄：{item.age}
        </li>
      ))}
    </ul>
  </div>
)

运行结果：