react中map的用法:1、使用「{this.state.ToDoList.map((item,index)=>{return
{item}})}」語法循環顯示一個陣列ToDoList;2、用陣列呼叫「map()」方法,return傳回想要得的內容即可。
本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。
react中map的用法是什麼?
React 中 map() 方法的使用,以及 key 值的綁定。
1、這裡以一個迴圈顯示一個陣列ToDoList的範例來展示。
import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props) this.state = { ToDoList:[1,2] } } render() { return ( <div> <input></input><button>提交</button> <ul> {this.state.ToDoList.map((item,index)=>{ return <li key={index}>{item}</li> })} </ul> </div> ) } }
2、直接用陣列呼叫 map() 方法,return 傳回你想要得到的內容,以及綁定 key 值。
<ul> {this.state.ToDoList.map((item,index)=>{ return <li key={index}>{item}</li> })} </ul>
2.1 這裡為了方便所以綁定的key值是數組的下標,實際使用中不建議這麼做,因為React中Diff演算法進行組件對比時,調用的key是數組下標的話,數組的改變,會導致下標對應的數組內容不正確,例如
[1,2,3] ,將1刪除之後變成[2,3],
原來標0對應的1, 下標1對應2,下標2對應3,改變之後下標0對應的2,下標1對應的3.顯然這會對Diff演算法進行兩個虛擬DOM對比時造成困擾,因為id相同的情況下對應的內容卻不一樣了,失去了id的意義。因此不建議使用陣列下標作為key值。這是根據自己理解寫的,可以有些錯誤的理解,反正大概是這個意思,有錯誤的地方望指正。
3.運行結果如下圖
推薦學習:《react影片教學》
以上是react中map的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!