react key 的使用 筆記

2021-10-23 15:12:26 字數 547 閱讀 1025

1 為什麼要用key

官方詳細介紹

當react進行渲染時 會進行遍歷兩個dom節點的子元素 進行對比 有變化時 就產生乙個mutation(官方說法) 個人理解是變化值 如果說在子元素末尾進行渲染 react會進行匹配第乙個和第二個元素所對應的樹 然後進行插入

這種插入方式 並不特別消耗效能 如果說 元素需要進行插入第乙個時 react會重建第乙個元素後的所有元素 這樣就進行了較大的效能消耗 當擁有key值的時候 react會使用key來進行匹配原有樹上子元素和現有樹上子元素進行匹配 和比對 這時候react會計算出後面的元素僅僅是進行了移動 這樣效能就提公升了

2 key

key值在兄弟節點之間必須是唯一的

//錯誤

key使用位置:元素的 key 只有放在就近的陣列上下文中才有意義。(官方原話)

// 正確 

// 錯誤

key 會傳值給react(不懂)但不會傳給元件(理解是:在父子元件傳值中不能用key作為名稱 props 否則不會被顯示)

this 的使用 筆記

this指標 在類的每乙個成員函式的形參表中都有乙個隱含的指標變數this,該指標變數的型別就是成員函式所屬類的型別 當程式中呼叫類的成員函式時,this指標變數被自動初始化為發出函式呼叫的物件的位址 this的使用 1 區分成員和非成員 2 乙個類的方法需要返回當前物件的引用 qs set int...

React key值的作用和使用

react 中的key 屬性是乙個特殊的屬性,它的出現不適給開發者用的,列如你為乙個元件設定key 之後,也無法獲取這個元件的key值,而是給react 自己用的。簡單說,react利用key來識別元件,他是一種身份標識,就像每個人有乙個身份證來做辨識一樣。每個key 對應乙個元件,相同的key r...

wireshark的使用筆記

最近在閱讀林沛滿編寫的兩本關於wireshark的書,寫作風格與以往看過的技術文章不同,我比較喜歡這種寫作風格,知識點在不經意間就慢慢進入了你的腦海,不錯。這篇文章我應該會不定期修改一下,以記錄使用wireshark中的一些事情。1.限制單包大小 可以通過限制每個包的尺寸來減少整個抓包檔案的大小。舊...