循环渲染

使用 map 进行循环，循环哪个结构就 return 哪个结构。

注意：需要给循环体绑定 key 属性。key属性的作用用于React内部，提升更新性能，它的值可以是字符串或数字，但必须唯一。

const list = [
  {
    id: 1,
    name: "vue",
  },
  {
    id: 2,
    name: "react",
  },
  {
    id: 3,
    name: "angular",
  },
];

export default function App() {
  return (
    <div>
      <h1>Hello JSX!</h1>
      <ul>
        {list.map((item, index) => {
          return <li key={index}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}