react優化部分immutable

2022-09-03 00:27:28 字數 670 閱讀 2882

immutable  結合componentshouldcomponent  

state =

shouldcomponentupdate(nextprops,nextstate)

}return false

}存在以下問題:

1.如果counter物件屬性變了,但是物件沒變,無法更新

2.如果counter物件變了,但是counter屬性沒變  卻更新了

該更得不更新,不該更新得更了   這就是問題

深比較:效能太差    return  !_.isequal(this.state,nextstate)    lodash的深轉殖

目的:根據內容變化重新整理,效能好    import from 'immutable'

state = )}

變化時 : let counter=this.state.counter.update('number',val=>val+1)   

if(object.keys(this.state).length !== object.keys(nextstate).length)return true

for(let key in nextstate)

}return false

其實根本問題在於借助immutable的is方法進行比較了,我們是淺比較卻做了深比較的事

React 效能優化

避免重複渲染 當乙個元件的props或者state改變時,react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時,react會更新dom。在一些情況下,你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度,它是在重新渲染過...

react 效能優化

在shouldcomponentupdate 方法中判斷props和state是否改變,若未改變則無需渲染。有些情況如父元件的props或state改變了,但是子元件其實未改變,若不判斷的話會導致子元件一起被渲染。shouldcomponentupdate nextprops nextstate r...

React效能優化

一 事件的優化 1 建構函式中宣告 export default mycom extends component render fun 此中方式只會在建構函式中建立一次,效能最好,但無法傳值 2 在元件中宣告 export default mycom extends component fun 該方...