react数组循环渲染

正常来说我们的页面很多数据都是动态渲染的，我们一般根据一个数组来进行动态渲染。在react里面没有类似vue的指令，所以我们必须自己手动循环生成。

在react里面我们一般采用map方法对数组进行循环，因为map方法可以返回我们想要渲染的jsx结构。

import React from "react";
import ReactDOM from "react-dom/client";

const rootEl = document.getElementById('root')
const root = ReactDOM.createRoot(rootEl)
let arr = [
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李三', age: 20 },
  { id: 3, name: '王三', age: 20 },
]
root.render(
  <div>
    {arr.map(item => <h1 key={item.id}>我的名字叫做{item.name},今年{item.age}岁</h1>)}
    <h1>给出一个随机数{Math.floor(Math.random() * 100)}</h1>
  </div>
)

注意点：记得添加key值，不添加key值会有一个小报错，虽然不影响代码运行，所以，在react里面，为了保证diff算法对于dom对象的重用处理，也需要给每个循环生成的结构添加一个key属性。