React 效能優化

2021-09-02 20:03:01 字數 1161 閱讀 9169

避免重複渲染:

當乙個元件的props或者state改變時,react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時,react會更新dom。

在一些情況下,你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度, 它是在重新渲染過程開始前觸發的。 這個函式預設返回true,可使react執行更新:

shouldcomponentupdate(nextprops, nextstate)
如果你知道在某些情況下你的元件不需要更新,你可以在shouldcomponentupdate內返回false來跳過整個渲染程序,該程序包括了對該元件和之後的內容呼叫render()指令。

不會突變的資料的力量:

避免此類問題最簡單的方式是避免使用值可能會突變的屬性或狀態。

handleclick() ));

}

使用不可突變的資料結構:

immutable.js是解決這個問題的另一種方法。它通過結構共享提供不可突變的,持久的集合:

不可突變資料使得變化跟蹤很方便。每個變化都會導致產生乙個新的物件,因此我們只需檢查索引物件是否改變。 

const somerecord = immutable.record();

const x = new somerecord();

const y = x.set('foo', 'baz');

x === y; // false

在這個例子中,x突變後返回了乙個新的索引,因此我們可以安全的確認x被改變了。

還有兩個庫可以幫助我們使用不可突變資料:seamless-immutable 和immutability-helper。

實現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 該方...

React 效能優化

profiler api profiler 衡量react應用程式渲染的頻率以及渲染的 成本 是多少。其目的是幫助識別應用程式中速度較慢的部分,並可能從諸如memoization 之類的優化中受益。分析會增加一些額外的開銷,因此在生產版本中將其禁用。它只會進行淺層比較,因此,如果道具或狀態可能以淺層...