JSX 实现列表渲染
const list = [
{ id: 1001, name: 'Vue' },
{ id: 1002, name: 'React' },
{ id: 1003, name: 'Angular' },
{ id: 1004, name: 'Node' },
]
function App() {
return (
<div className="App">
this is App
{/* 渲染列表 */}
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
);
}
export default App;
map() 是 Js 数组的一个函数，会遍历数组中的每个元素，并对每个元素执行一次提供的函数。map循环哪个结构，就return哪个结构。
item 是 map() 方法提供的当前正在处理的数组元素。在这个例子中，item 是 list 数组中的一个对象，包含 id 和 name 属性。
箭头函数返回一个 JSX 元素 <li>。这个 <li> 元素会作为列表项展示在 <ul> 标签内。
<li>中 key={item.id} 是 react 内部用的，加上一个独一无二的key（字符串、number或id）与开发者关系不大，主要是用于提升渲染性能 。