React 元件更新優化

3. react.memo

4. usememo

shouldcomponentupdate和react.purecomponent是類元件中的優化方式，而react.memo是函式元件中的優化方式。

class

componentdiffpure
extends
purecomponent;}
changestate=(
)=>);
};render()
>click<
/button>
<
/div>
<
/div>);
}}

shouldcomponentupdate

(nextprops, nextstate
)

import

from
'immutable'
shouldcomponentupdate
(nextprops =
, nextstate =
)=>

function

mycomponent
(props
)function
areequal
(prevprops, nextprops
)export
default react.
memo
(mycomponent, areequal)
;

最終export的元件，就是react.memo()包裝之後的元件

// 根據count變化才會重新返回新的userinfo 

const userinfo =
usememo((
)=>;}
,[count]);
return
(->按鈕<
/button>
/>
<
/div>
)

React元件更新混亂

原因 元件key值的設定不規範導致。解決辦法 給資料項設定唯一的id。使用id給元件設定key值，而不要使用，隨機的，或者按順序設定key值。問題情況 渲染元件 data 當期資料 i 當期下標 delete 刪除選框開啟 setdelete 設定刪除函式 that.state.data.map f...

react 簡單優化設計 純元件的優化

加入有如下 settimeout 1000 這裡每隔1 秒 就重新整理一次，這個時候 a 元件會每次重複diff 演算法，看是否該重新渲染，然後走render 方法 這樣效率太低，我們的設想就是，只要 data 資料不變，我們就不會渲染，這樣會節省很大的成本 所以這就有了純元件的概念 一種是clas...

react純函式元件useState更新頁面不重新整理

const textlist,settextlist usestate 原陣列 settextlist 新陣列 當修改原陣列時，如果原陣列是個深層陣列 不只一層 使用settextlist修改時，不會觸發頁面重新整理 這個涉及到可變物件he不可變物件的知識，在vue和react中，如果更新可變物件時...