最近在看一本名叫《深入淺出react和redux》這一書,裡面談到了react的dom更新比對,記錄一下。
假設有這麼乙個元件
現在,我們在這個元件的前面插入乙個新的元件
思考,怎麼更新dom是最優的,react是去怎麼更新?
按照我們的思維,最優的更新dom就是去把新增乙個可是react不是這樣更新的!listitem
元件,放在第乙個。把之前的第乙個元件以及第二個元件
往後挪一位。這樣的結果是最好的。
它先去比較第乙個在 react 的眼裡,確定每乙個元件在元件序列中的唯一標識就是它的位置,所以listitem
元件,發現元件上的text
值first
變成了zero
,需要更新。第二個元件text
之前的second
變成了first
,也需要更新,最後新建立乙個元件,把它的text
設定為second
。react就完成了它的更新。
它也完全不懂哪些子元件實際上並沒有改變,為了讓 react 更加「聰明」,就需要開發者
提供一點幫助。
如果在**中明確地告訴 react 每個元件的唯一標識,就可以幫助 react 在處理這個
問題時聰明很多,告訴 react 每個元件「身份證號」的途徑就是 key 屬性。
現在再去插入乙個listitem
元件放在最前面,讓它key為0
現在,react根據key值,知道了第二個第三個元件是之前的第乙個第二個,所以react會建立乙個listitem
元件放在第一位,對於原有的兩個元件只用原有的props觸發更新。這裡就需要元件內部的shouldcomponentupdate
的鉤子函式進行判斷來減少不必要的更新。
但是這個 key 值只是唯一還不足夠,這個 key 值還需要是穩定不變的,試想,如果
key 值雖然能夠在每個時刻都唯一,但是變來變去,那麼就會誤導 react 做出錯誤判斷,
甚至導致錯誤的渲染結果。
用陣列下標作為 key ,看起來 key 值是唯一的,但是卻不是穩定不變的,隨著arr
陣列值的不同,同樣乙個listltem
例項在不同的更新過程中在陣列中的下標完全可能不
同,把下標當做 key 就讓 react 徹底亂套了。
需要注意,雖然 key 是乙個 prop ,但是接受 key 的元件並不能讀取到 key 的值,因為key
ref
react 保留的兩個特殊 prop ,並沒有預期讓元件直接訪問。
陣列的下標為什麼從0開始
關於陣列的下標為什麼從0開始,我想這是許多初學陣列的同學所疑惑的,在此我發表一些我的看法。首先假設我要定義乙個int a 相信大家對這個還是比較容易理解的,這個時候系統自動為a分配2個位元組的儲存空間 有的編譯器是4個 一般是兩個 a無可厚非,指的就是那兩個位元組的空間,如果要給a賦值的話,直接a ...
為什麼函式式程式設計不用陣列
鍊錶是遞迴的資料結構,在上面的操作大部分可以用它的eliminator完成,最終效果就是數學歸納法 因為函式式程式設計中大量的迴圈操作是依賴遞迴 和map 的,雖然map也是由遞迴實現的 而這時候用鍊錶這種遞迴定義的資料結構就是一種自然而然的事情了。但可達鴨眉頭一皺,發現事情並不簡單 實際上,將鍊錶...
為什麼不用Dojo?
不用dojo,原因可能有很多,但是主要的就是 2.dojo的外觀精細度遠不如extjs,extjs的操作更windows一些。3.dijit的widget不如extjs的功能多,使用dojo很多時候你不得不自己編制乙個擴充套件widget。可能更多的原因,還是比較喜歡 拿來就用 不喜歡自己程式設計。...