React Native性能優(yōu)化

前幾天看了某位大神的rn視頻感觸頗深,rn的性能優(yōu)化道路雖然很艱難,但希望總會是有的。

1.優(yōu)化Component

很多人在定義一個(gè)class時(shí)都會去繼承Component,這并沒有錯(cuò),但是如果一個(gè)子組建也繼承了Component,那么當(dāng)父組建render時(shí)也會導(dǎo)致子組建的render,怎么解決呢?其實(shí)很簡單只需要我們的子組建去繼承PureComponent即可。個(gè)人建議自定義的class都可以去繼承PureComponent從而避免不必要的render。

2.優(yōu)化方法的創(chuàng)建

內(nèi)部方法的定義應(yīng)該使用 onPress=()=>{}. 調(diào)用直接this.onPress即可,避免創(chuàng)建多個(gè)fun

3.善于使用shouldComponentUpdate

通過shouldComponentUpdate的返回結(jié)果我們可以去控制什么時(shí)候應(yīng)該render,什么情況應(yīng)該render。

4.listview代替scrollview

使用listview我們可以設(shè)置首次render時(shí)要渲染的ui數(shù)量,這樣一定程度上優(yōu)化了首次進(jìn)入頁面時(shí)所需要的渲染時(shí)間(renderHeader/pagesize)

5.使用InteractionManager

InteractionManager.runAfterInteractions(...)的官方文檔說的很清楚,通過他可以處理一些耗時(shí)操作,所以我個(gè)人建議把網(wǎng)絡(luò)請求放在次方法中去處理,這樣很大程度上可以解決首次進(jìn)入時(shí)的卡頓。

6.使用Animated去處理一些簡單的動畫

我想應(yīng)該會有很多小伙伴遇到這樣的問題,切換不同的state改變某個(gè)view的height/width,是不是很多小伙伴都會用state去控制height/width。并不是說這樣是完全不對,只是這樣耗費(fèi)性能,因?yàn)槟愕膕tate的改變會觸發(fā)render,而對于一個(gè)過程來說,這樣的render次數(shù)是我們不愿意看到的,那該怎么解決呢?其實(shí)大家可以使用Animated去代替state,Animated封裝了一系列優(yōu)雅的處理函數(shù),完全可以實(shí)現(xiàn)你想要的效果,使用方法官方有介紹。

React Native的優(yōu)化是一條漫漫長路,可路邊總會有一些風(fēng)景讓你覺的終點(diǎn)并不遙遠(yuǎn),再次感謝@天地之靈 大神的精彩分享,希望學(xué)習(xí)rn的小伙伴們共同去探討,共同去進(jìn)步。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容