react數(shù)組循環(huán)渲染過程
更新時間：2026年05月19日 09:57:56 作者：冰涼小腳
在React中,我們使用map方法對數(shù)組進(jìn)行循環(huán)渲染,并生成對應(yīng)的jsx結(jié)構(gòu),為了確保React的diff算法可以正確地處理dom對象,我們需要為每個生成的元素添加key屬性,注意：雖然不添加key屬性代碼可以運(yùn)行,但會報錯
react數(shù)組循環(huán)渲染
正常來說我們的頁面很多數(shù)據(jù)都是動態(tài)渲染的，我們一般根據(jù)一個數(shù)組來進(jìn)行動態(tài)渲染。
在react里面沒有類似vue的指令，所以我們必須自己手動循環(huán)生成。
在react里面我們一般采用
map方法對數(shù)組進(jìn)行循環(huán)，因為map方法可以返回我們想要渲染的jsx結(jié)構(gòu)。
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>給出一個隨機(jī)數(shù){Math.floor(Math.random() * 100)}</h1>
</div>
)注意點
記得添加key值，不添加key值會有一個小報錯，雖然不影響代碼運(yùn)行，所以，在react里面，為了保證diff算法對于dom對象的重用處理，也需要給每個循環(huán)生成的結(jié)構(gòu)添加一個key屬性。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react中的forwardRef 和memo的區(qū)別解析
forwardRef和memo是React中用于性能優(yōu)化和組件復(fù)用的兩個高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場景,感興趣的朋友跟隨小編一起看看吧2023-10-10
React Ant Design樹形表格的復(fù)雜增刪改操作
這篇文章主要介紹了React Ant Design樹形表格的復(fù)雜增刪改操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在React項目中引入國際化可以使用第三方庫來實現(xiàn)，本文主要介紹了react項目中如何引入國際化，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
文章介紹了如何在React Native項目中使用TypeScript進(jìn)行開發(fā),包括安裝依賴、配置babel.config.js、創(chuàng)建tsconfig.json文件、使用@別名引入src文件夾下的文件,并展示了效果圖2026-03-03
這篇文章主要為大家介紹了react?cropper圖片裁切實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
在react項目中使用antd的form組件,動態(tài)設(shè)置input框的值
這篇文章主要介紹了在react項目中使用antd的form組件,動態(tài)設(shè)置input框的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Zustand?是一個非常輕量、簡潔的狀態(tài)管理庫,旨在為 React 提供簡便且高效的狀態(tài)管理,相比于 Redux 或 Context API,Zustand 具有更簡潔、靈活和易于理解的優(yōu)點,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了React項目搭建與Echarts工具使用詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
useState 通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部 state，React 會在重復(fù)渲染時保留這個 state，接下來通過一個示例來看看怎么使用 useState吧2021-06-06
本文主要介紹了React18新增特性released的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05