React 列表渲染基础示例

React 中最常见的一个需求就是「把一组数据渲染成一组 DOM 元素」，比如一个列表。下面是我写的一个最小示例，目的是搞清楚它到底是怎么工作的。

示例代码

// 定义一个静态数组，模拟后续要渲染的数据源
// 每个对象代表一个前端框架，注意一定要有唯一的 id
const list = [{ id: 1001, name: 'Vue' },{ id: 1002, name: 'React' },{ id: 1003, name: 'Angular' }
]// 定义一个函数式组件 App，React 推荐使用函数组件
function App() {return (<div className="App">{/* 这是组件的基本结构，先写个提示文本 */}this is App{/* 下面这个列表是重点，动态渲染 list 数据 */}<ul>{// 用 map 把每个数据项转成一个 <li> 元素// 注意：一定要加 key，React 需要这个 key 来区分每一项list.map(item => (<li key={item.id}>{item.name}</li>))}</ul></div>)
}// 别忘了把组件导出去，不然在其他文件里用不了
export default App

理解重点（写给自己看的）

1. 为什么要加 key？

React 在渲染列表时，靠 key 来识别每一项。如果没有 key，它在对比新旧节点时会不清楚哪个该更新、哪个该删除，会导致性能低下或者奇怪的渲染 bug。最保险的做法就是用数据库里自带的 id。

2. 为什么用 map？

因为 map 可以把原始数组“转换”为另一种形式。在这里，我们把对象转成 <li> 元素，它刚好就是我们想要的结构。

3. JSX 中变量必须写在 {} 里

比如 {item.name}，这是 JSX 的基本语法。哪怕只是变量，也必须包在大括号中，不然它会被当作字符串来处理。

4. className 而不是 class

这是 React 的一处设计细节：因为 class 是 JavaScript 的保留字，所以 React 用 className 来代替 HTML 的 class。

这一小段代码虽然简单，但本质上已经覆盖了 React 列表渲染的基础。每次写 map 渲染列表时，我都会回头看一下这段例子，确保自己没有遗漏关键点。

下次我想试试给每一项加点击事件，比如高亮或者删除，思路其实也很清晰：加一个 onClick 就可以了。