React/practise/02.列表循环渲染.jsx

/* react如何完成列表渲染
技术方案：map 重复渲染的是哪个模板就 return 谁
注意事项：遍历列表同时需要一个类型为 number/string 不可重复的 key， 提高 diff 性能
 key 仅仅在内部使用，不会出现在真实的 DOM 结构中 
 */
const user = [
  { id: 1, name: 'ken', age: 20},
  { id: 2, name: 'Luckly', age: 30},
  { id: 3, name: 'Max', age: 40},
]

function App() {
  return (
    <div className="App">
      { user.map( user => <li key={user.id}>{ user.name }{user.age}</li>)}
    </div>
  );
}

export default App;