JSX 列表渲染

列表渲染"/>

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

运行结果：