React 列表元件與key

2021-10-06 22:25:43 字數 2372 閱讀 5176

diff演算法

元件stateprops發生變化時,react會 比對 本次虛擬dom樹和上次虛擬dom樹,然後根據二者的不同來操作真實dom樹,這個過程就是diff演算法

diff演算法的基本思路是 從根節點往下遞迴進行比對,每個節點可以看作是該節點以下子樹的根節點。

解除安裝裝載

更新componentwillunmount()constructor()getderivedstatefromprops()

-getderivedstatefromprops()shouldcomponentupdate()

-render()render()

-componentdidmount()componentdidupdate()

列表元件為什麼需要key

都是給

import react from

"react"

;import reactdom from

"react-dom"

;const numbers =[1

,2,3

,4,5

];function

numberlist

(props)

>

<

/li>);

return

(<

/ul>);

}reactdom.

render

(/>

, document.

getelementbyid

('root'

))

import react from
"react"

;import reactdom from

"react-dom"

;const numbers =[1

,2,3

,4,5

];function

listitem

(props)

<

/li>

}function

numberlist

(props)

value=

/>);

return

(<

/ul>);

}reactdom.

render

(/>

, document.

getelementbyid

('root'

))乙個合格的key是什麼樣

了解了為什麼需要key,我們就知道乙個合格的key應該是什麼樣,兄弟節點間,key必須穩定唯一,不需要全域性唯一哈。

React元件中的key

一 key的作用 react中的key屬性,它是乙個特殊的屬性,它是出現不是給開發者用的 例如你為乙個元件設定key之後不能獲取元件的這個key props 而是給react自己用的。簡單來說,react利用key來識別元件,它是一種身份標識標識,就像我們的身份證用來辨識乙個人一樣。每個key對應乙...

React公升職記 列表 key

react列表迴圈在 裡面使用es6新語法map 1.把map 提取出來的 function numberlist props return 2.沒有把map 提取出來的,map 巢狀層次多最好提取出來 const numbers 1,2,3,4,5 reactdom.render document...

React例項 列表元件

現在src的目錄下面,新建乙個檔案xiaojiejie.js檔案,然後寫乙個基本的html結構。如下 import react,from react class xiaojiejie extends component export default xiaojiejie這個檔案現在還沒有什麼功能,只...