ToDoList是我學(xué)習(xí)react的開始，對(duì)于列表組件，我進(jìn)行的組件封裝是這樣的層次： TodoitemList——>TodoLi——>TodoItem
這些組件外層包裹的是rudux和react-dnd封裝，方便做數(shù)據(jù)管理和拖拽功能。
在demo演示的時(shí)候，導(dǎo)師指出的第一個(gè)問題就是組件化思想，對(duì)組件的封裝有問題狮含。我的理解是todoli分裝好了之后，再在li下面封裝一個(gè)todoitem完全沒有必要曼振，因?yàn)閘i現(xiàn)在的存在作用僅僅是一個(gè)數(shù)據(jù)轉(zhuǎn)存几迄，沒有任何存在的必要性，完全可以合并todoli和todoitem做為一個(gè)組件冰评。
第二個(gè)問題是render映胁，用數(shù)組返回的li元素，設(shè)置好key了甲雅，做了shouldComponentUpdate判斷解孙，如果元素內(nèi)容沒有變化坑填，就不要銷毀重新建立，而是再次使用弛姜，這樣可以減少大量的性能消耗脐瑰。但是仍舊遇到問題，就是刪除一個(gè)元素后廷臼，排列再之后的li都會(huì)再次render苍在，should生命周期內(nèi)判斷返回的是true，而且willunmounted每次銷毀的都是最后一個(gè)元素而不是點(diǎn)擊刪除的對(duì)應(yīng)元素荠商。
正常的邏輯是key和shuold都寫好了寂恬，不應(yīng)該出現(xiàn)未修改的元素也會(huì)render，不符合diff算法莱没。最終在官網(wǎng)上看到該問題的產(chǎn)生的原因掠剑，也只能感嘆對(duì)react的了解和理解太少。
將key提取到todoli上郊愧，發(fā)現(xiàn)果然不再render未修改的元素，保證了性能
