本文首發(fā)于我的博客
前言
前段時間用vue重構完公司的pc項目后閑了兩天捐下，回味了一下vue的整體開發(fā)過程。
現(xiàn)在公司有個無線項目預計是需要重構的盒至，因為本身是混合開發(fā)的webApp硕旗。所以在vue的基礎上直接去讀了react的文檔。
以便于未來看情況是否可以上react native去完成項目重構但惶。
留個學習記錄在此耳鸯，一是好記性不如爛筆頭，二是方便以后回頭查看膀曾。
react的生命周期
react開發(fā)過程的注意事項
眾所周知react的黑科技是虛擬dom技術县爬。
而這種技術的出發(fā)點就是為了在能自動化更新dom的情況上且避免大面積的更新dom(這也就是Angular2為什么與Angular1有如此大不同)，從而快準狠的針對修改處進行修改添谊。
所以我們在開發(fā)過程中也應該保證此技術的出發(fā)點财喳，避免大面積更新dom。這樣才是好鋼用在刀刃上斩狱。
shouldComponentUpdate()
而根據(jù)上面的生命周期圖示耳高，我們會發(fā)現(xiàn)shouldComponentUpdate鉤子是非常特殊的。
因為mvvm的思想我們的核心關注點基本都是在數(shù)據(jù)上所踊，所以我們在交互過程中可能要非常頻繁的去調(diào)用this.setState泌枪。
這樣就會頻繁的觸發(fā)shouldComponentUpdate，所以我們必須要確保此鉤子的運行速度秕岛。
那么一般情況我們只需要對傳入的值進行判斷就好了碌燕，比如：
shouldComponentUpdate(nextProps,nextState){
if(nextState.Number == this.state.Number){
return false
}
return true
}
好，正戲來了瓣蛀！
稍微對js有點了解的人都會知道陆蟆，函數(shù)傳參是值類型,那么如果只在這里不做特殊處理的話就只會返回false是不符合條件的。
那么我們有哪幾種解決方案呢惋增？
- 很經(jīng)典的對象深拷貝
如果你確定你自己的能力能寫出很完善的深拷貝方法并且性能有所保證是完全可以自己實現(xiàn)的叠殷，原理就是將目標的引用類型通過遞歸，層層向下找到最底層的基礎數(shù)據(jù)類型诈皿，然后拼裝成一樣結構且數(shù)據(jù)相同的引用類型林束。
- immutable.js庫
有人說這個庫真的是一個偉大的發(fā)明像棘，他的存在如果善于利用可以使react的性能十倍十倍的提升
上面這句話是我在社區(qū)內(nèi)看到的，足以證明這個庫的價值壶冒。
