本文首發(fā)于我的博客
前言
前段時(shí)間用vue重構(gòu)完公司的pc項(xiàng)目后閑了兩天，回味了一下vue的整體開發(fā)過程。
現(xiàn)在公司有個(gè)無線項(xiàng)目預(yù)計(jì)是需要重構(gòu)的，因?yàn)楸旧硎腔旌祥_發(fā)的webApp。所以在vue的基礎(chǔ)上直接去讀了react的文檔。
以便于未來看情況是否可以上react native去完成項(xiàng)目重構(gòu)。
留個(gè)學(xué)習(xí)記錄在此，一是好記性不如爛筆頭，二是方便以后回頭查看。
react的生命周期
react開發(fā)過程的注意事項(xiàng)
眾所周知react的黑科技是虛擬dom技術(shù)。
而這種技術(shù)的出發(fā)點(diǎn)就是為了在能自動(dòng)化更新dom的情況上且避免大面積的更新dom(這也就是Angular2為什么與Angular1有如此大不同)，從而快準(zhǔn)狠的針對(duì)修改處進(jìn)行修改。
所以我們?cè)陂_發(fā)過程中也應(yīng)該保證此技術(shù)的出發(fā)點(diǎn)，避免大面積更新dom。這樣才是好鋼用在刀刃上。
shouldComponentUpdate()
而根據(jù)上面的生命周期圖示，我們會(huì)發(fā)現(xiàn)shouldComponentUpdate鉤子是非常特殊的。
因?yàn)閙vvm的思想我們的核心關(guān)注點(diǎn)基本都是在數(shù)據(jù)上，所以我們?cè)诮换ミ^程中可能要非常頻繁的去調(diào)用this.setState。
這樣就會(huì)頻繁的觸發(fā)shouldComponentUpdate，所以我們必須要確保此鉤子的運(yùn)行速度。
那么一般情況我們只需要對(duì)傳入的值進(jìn)行判斷就好了，比如：
shouldComponentUpdate(nextProps,nextState){
if(nextState.Number == this.state.Number){
return false
}
return true
}
好，正戲來了！
稍微對(duì)js有點(diǎn)了解的人都會(huì)知道，函數(shù)傳參是值類型,那么如果只在這里不做特殊處理的話就只會(huì)返回false是不符合條件的。
那么我們有哪幾種解決方案呢？
- 很經(jīng)典的對(duì)象深拷貝
如果你確定你自己的能力能寫出很完善的深拷貝方法并且性能有所保證是完全可以自己實(shí)現(xiàn)的，原理就是將目標(biāo)的引用類型通過遞歸，層層向下找到最底層的基礎(chǔ)數(shù)據(jù)類型，然后拼裝成一樣結(jié)構(gòu)且數(shù)據(jù)相同的引用類型。
- immutable.js庫
有人說這個(gè)庫真的是一個(gè)偉大的發(fā)明，他的存在如果善于利用可以使react的性能十倍十倍的提升
上面這句話是我在社區(qū)內(nèi)看到的，足以證明這個(gè)庫的價(jià)值。
