先上圖
文章系列主要內(nèi)容如下：
- 減少重復(fù)渲染
- 列表懶加載
- 動畫和數(shù)據(jù)請求分離
- 導(dǎo)航閃動
本次主要內(nèi)容：減少重復(fù)渲染
在react +redux 架構(gòu)的項目中统舀，只要state發(fā)生改變处铛，整個項目都會被渲染属百，那么如何減少重復(fù)渲染呢屹徘？
列表重復(fù)渲染
react 的生命周期提供了一個方法判斷組件是否更新
//true表示更新檐嚣，false表示不更新
shouldComponentUpdate: function(nextProps, nextState) {
return true;
}
對于不需要重復(fù)渲染的組件我們可以：
shouldComponentUpdate: function(nextProps, nextState) {
return false;
}
對于需要通過對某個數(shù)值判斷是否渲染的，我們可以：
shouldComponentUpdate: function(nextProps, nextState) {
return this.props.value !== nextProps.value;
}
對于需要對數(shù)組判斷的情況，上面的做法可能不正確
因為在操作數(shù)組是我們是操作的同一個數(shù)組居夹，在操作的過程中nextProps和nextState的值已經(jīng)相同了，如果要讓他不同本冲，必須用redux的提供的官方操作准脂，先拷貝數(shù)組對象再操作，或者[].concat()(concat會返回一個新數(shù)組檬洞，類似拷貝對象)狸膏。然后我們在shouldComponentUpdate中判斷nextProps和nextState就行了，這是的判斷結(jié)果才會是正確的添怔。
這個時候我們又遇到了新的問題
如果組件中一部分需要渲染湾戳，一部分不需要渲染怎么辦闷板？
這個時候就改考慮組件拆分的問題了，其實組件拆分不僅能提高代碼的可讀性院塞，也可以對組件優(yōu)化起一臂之力遮晚。
歡迎大家關(guān)注我的簡述，我后續(xù)會根據(jù)我們項目繼續(xù)更新這個系列文章_
