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

运行结果：