FlatList 元件效能優化理解

2021-08-27 03:40:47 字數 1769 閱讀 5750

flatlist 之所以節約記憶體、渲染快,是因為它只將使用者看到的(和即將看到的)部分真正渲染出來了。而使用者看不到的地方,渲染的只是空白元素。渲染空白元素相比渲染真正的列表元素需要記憶體和計算量會大大減少,這就是效能好的原因。

優化flatlist列表效能方法我總結為三種:

1、getitemlayout

可選優化項。但是實際測試中,如果不做該項優化,效能會差很多。所以強烈建議做此項優化!

如果不做該項優化,每個列表都需要事先渲染一次,動態地取得其渲染尺寸,然後再真正地渲染到頁面中。

如果預先知道列表中的每一項的高度(item_height)和其在父元件中的偏移量(offset)和位置(index),就能減少一次渲染。這是很關鍵的效能優化點。

/*

* length: 是被渲染 item 的高度。

* offset(偏移量)

* 注意如果你指定了itemseparatorcomponent,請把分隔線的尺寸也考慮到 offset 的計算之中。

*/

_getitemlayout = (data, index) => (

)

2、removeclippedsubviews(注意:有些情況下會有 bug(比如內容無法顯示)。請謹慎使用。)

乙個將「剪裁子檢視」(clipped subviews)(指的是那些在父檢視之外的檢視)從檢視層級中刪除的本地優化,為的是減輕渲染系統的工作負擔。但是這些被剪裁掉的子檢視依然保留在記憶體中,所以它們所佔的儲存空間沒有被釋放,內部狀態也都保留了下來。

設定為true, 這可能會極大的改善長列表的滑動效能。

3、利用purecomponent來進一步優化效能和減少bug產生的可能

先寫乙個列表mylistitem元件,其onpressitem屬性使用箭頭函式而非 bind 的方式進行繫結,使其不會在每次列表重新 render 時生成乙個新的函式,從而保證了 props 的不變性(當然前提是 id、selected和title也沒變),不會觸發自身無謂的重新 render。換句話說,如果你是用 bind 來繫結onpressitem,每次都會生成乙個新的函式,導致 props 在===比較時返回 false,從而觸發自身的一次不必要的重新 render。 

給flatlist指定extradata=屬性,是為了保證state.selected變化時,能夠正確觸發flatlist的更新。如果不指定此屬性,則flatlist不會觸發更新,因為它是乙個purecomponent,其 props 在===比較中沒有變化則不會觸發更新。

keyextractor屬性指定使用 id 作為列表每一項的 key。

借用官方文件例子: 

class mylistitem extends react.purecomponent ;

render()

);}}

class multiselectlist extends react.purecomponent ;

_keyextractor = (item, index) => item.id;

_onpressitem = (id: string) => ;

});};

_renderitem = () => (

);render()

}

end

Java效能優化之元件 緩衝

緩衝區是乙個特定的儲存區域,可以協調應用程式上下層質量的效能差異,提高系統執行效率。緩衝最常使用的場景是i o處理。jdk中提供了很多帶緩衝的i o元件。比如讀取檔案。public static void readbybyte string file catch ioexception e if i...

mysql效能優化 mysql效能優化

優化方式 1.空間換時間 冗餘 2.時間換空間 字段優先使用型別 int date char varchar text 索引型別 btree索引 hash索引 索引的葉子下,存放乙個資訊指向所在行的資料位址。btree有利於範圍查詢,hash有利於精確查詢。btree用的更多一些。btree索引的常...

效能優化 電量優化

使用battery historian來監測電量的情況,battery historian時google的乙個開源專案 具體安裝過程參見 當出現下列畫面,說明已經開啟 其開啟成功以後,訪問網頁如下所示 說明 這裡使用的是一台國外的vps伺服器,原本是想在本地虛擬機器實驗的,一直連線超時,就換成了vp...