react總結之避免不必要的重複渲染

2021-10-25 02:30:49 字數 1089 閱讀 7929

類元件purecomponent

適當的使用purecomponent建立元件可以提高效能,在使用類元件的時侯,繼承purecomponent元件,它是依賴於傳遞給元件的props進行淺比較,當props發生改變的時候,才會重新渲染元件,既然是淺比較,那麼在stateprops每次都發生改變的額時候,還要使用purecomponent就會對效能產生負面的影響了!

react.memo()

react.memo()purecomponent很相似,purecomponent是乙個類,react.memo()是乙個函式元件,它有兩個引數,第乙個引數是純函式的元件,第二個引數是true或者false,用於控制是否重新整理元件!

shouldcomponmentupdate

類元件的的生命週期函式,當返回值是false的時候,檢視不做更新,否則更新!

使用外掛程式seamless-immutable

1.引入import immutable from 'seamless-immutable';

2.初始化state

this.state =

3.修改state

this.setstate()

使用外掛程式pure-render-decorator
import react from 'react';

import purerender from 'pure-render-decorator';

// es7才支援裝飾器,這邊需要配置babel

@purerender

class list extends react.component = this.props;

return (

<>

);})});

}}export default list;

避免不必要的float

float中文翻譯為浮動,很形象的翻譯,在css很常用,當你需要吧兩個塊級元素定排放在同一高度上經常會用到float,先看一下float的 屬性。先看一下float可能的值 float left 元素向左浮動 float right 元素向右浮動 float none 不浮動 float inher...

避免不必要的物件

一般來說,最好能重用物件而不是在每次需要的時候就建立乙個相同功能的新物件。重用方式既快速,又流行。如果物件是不可變的,它就始終可以被重用。最為乙個極端的反面例子,考慮下面的語句 string s new string string don t do this 該語句每次被執行的時候都建立乙個新的st...

避免建立不必要的物件

下面是乙個比較微妙也比較常見的反面的例子,其中涉及可變的date物件,他們的值一旦計算出來之後就不再變化。這個類建立了乙個模型 其中有乙個人,並有乙個isbabyboomer方法,用來檢驗這個人是否為乙個babyboomer,換句話說,就是檢驗這個人是否出生於1946年至1964年之間。public...