react数组循环渲染过程
作者：冰凉小脚
在React中,我们使用map方法对数组进行循环渲染,并生成对应的jsx结构,为了确保React的diff算法可以正确地处理dom对象,我们需要为每个生成的元素添加key属性,注意：虽然不添加key属性代码可以运行,但会报错
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属性。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。