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 就可以了。