React PureComponent,React memo優化你了解多少,有哪些應用場景,不適場景?

時間 2021-05-13 03:02:57

1樓:

最主要是我們需要搞懂React.component、React.memo區別:

都可以進行效能優化,避免元件重複渲染,類似手動做了shouldComponentUpdate的工作。

React.memo用於函式元件、React.PureComponent用於類元件。

React.memo等效於React.PureComponent,但是它只會淺比較props,因為它不像類元件有乙個統一的state物件。

如果你硬想用React.memo也實現React.PureComponent一樣的效果,有兩種方式:

React.memo包裹的子元件都使用React.PureComponent

React.memo包裹的子元件都使用useMemo進行優化

function

Parent

()/>,[

a]);

// Only re-rendered if `b` changes:

const

child2

=useMemo

(()=>

/>,[

b]);

return

(<>)}

2樓:Rec3

useMemo比memo用的多,useMemo一般用來快取複雜計算的結果,memo函式在專案初期不建議使用,後期進行效能優化的時候才會考慮memo。你可以去翻一下antd元件的原始碼,看看useMemo和memo用在什麼地方就知道了。PureComponent幾乎不用了,被useSelector代替。

3樓:NoBugs

首先用的真的不多。

如果沒有效能問題的話是斷斷不會考慮進行這樣的效能優化的,保準你會繞的暈暈的,react這方面的心智負擔太大了,尤其是在hooks下,context 、React.memo 、useMemo 、deep compare,真是頭大,一不小心就是渲染不一致了。效能問題優先考慮元件的結構拆分、整合,考慮類redux框架進行狀態管理,實在不行再考慮這類方案....

4樓:龍背上的騎兵

只有你的應用嚴格遵循物件不可變, 且元件的渲染只依賴 props,state 時才可以使用 PureComponent 和 React.memo 。這裡其他依賴還包括 localStorage/sessionStorage, window 屬性例如 location ,如果依賴這些,則不可以使用上述優化,或者就算使用了也達不到響應式的效果。

PureComponent, memo 二者的比較範圍有區別,PureComponent會將 props 和 state 都進行一次淺比較,而 memo 只會對 props 進行淺比較。

如果嚴格按照物件不可變原則進行編碼,大部分場景還是建議所有元件都使用 PureComponent 或 memo 進行優化的,這兩者在生產環境下使用率極高,可以放心使用。

5樓:張大宗偉

我一般useMemo使用的比較多,防止元件不必要的渲染還是挺有用的。因為React compare props 是使用 Object.is(),也就是sameValue的情況,對於物件只會比較到引用這一層,所以memo物件時要注意出現內部屬性改變,但是元件未更新。

房地產你了解多少,我們你了解多少?

老李與清酒 其實這個問題非常好的,這個是目前在文化中很前衛的做法。日本現在也是開始在梅酒方面混入更多的元素,這也是正正酒的玩味。梅子酒屬於以水果增加風味的利口酒。通常用來泡浸的酒以蒸餾酒為主,尤其是以燒酒。國內人就用公尺酒吧,也是蒸餾酒。近年來已經多了很多變化,你這問題正正就說到這時代的變化了,很有...

人類對海洋的了解有多少?沒有了解的海域有哪些?怎樣才算對某個海域的完全了解?

瘋人院三號病人 很多人解釋了海域 我說一說海洋 人類對於海洋的了解分為 水質學海洋生物學 微生物學 氣候學考古學 物理學化學 以及政治學 細分學科從海水結構到地質結構,從食物鏈到化學反應現有的學科光是生物學就有種族,起源,分類,記錄,醫療,等等數不清的學科 所謂天無窮,而人力有盡。人類單單海水滲透細...

關於張若虛,你了解多少?

代答閨夢還 關塞年華早,樓台別望違。試衫著暖氣,開鏡覓春暉。燕入窺羅幕,蜂來上畫衣。情催桃李豔,心寄管弦飛。妝洗朝相待,風花暝不歸。夢魂何處入,寂寂掩重扉。 已登出 張若虛,張若虛,張若虛,emmmm,我把自己知道的一些還有自己的體會分幾部分答一下吧。總之看看就好,別太認真!一 真 若虛 二 孤篇壓...