react-效能優化

yezi-dream發表於2018-05-13

       開發中遇到一個需要優化的效能,頁面需要渲染很多table,而且可以自己新增table,所以就導致router改變時,清除這些DOM結構就會很慢,這就給使用者造成不好的體驗。

問題所在:清除渲染過多的DOM結構才導致遲緩;

解決方案:引入的table頁面作為一個子元件,存在切換table顯示內容的功能,所以就可以傳入一個bool型別的show值,作為是否渲染DOM結構的判斷,只有切換到該table才返回DOM結構,否則返回null,頁面就只會渲染目前顯示的table,而其他的table沒有渲染,這樣就解決了渲染過多的DOM而導致清除耗時長的問題。

       效能優化: 可以儘量只渲染當前需要顯示的內容,其他內容只有在需要顯示的時候才渲染,而不是一開始就將所有的內容都渲染。

 

 

 

        

相關文章