前幾天看了某位大神的rn視頻感觸頗深漏策,rn的性能優(yōu)化道路雖然很艱難,但希望總會是有的臼氨。
1.優(yōu)化Component
很多人在定義一個class時都會去繼承Component掺喻,這并沒有錯,但是如果一個子組建也繼承了Component储矩,那么當(dāng)父組建render時也會導(dǎo)致子組建的render巢寡,怎么解決呢?其實很簡單只需要我們的子組建去繼承PureComponent即可椰苟。個人建議自定義的class都可以去繼承PureComponent從而避免不必要的render。
2.優(yōu)化方法的創(chuàng)建
內(nèi)部方法的定義應(yīng)該使用 onPress=()=>{}. 調(diào)用直接this.onPress即可树叽,避免創(chuàng)建多個fun
3.善于使用shouldComponentUpdate
通過shouldComponentUpdate的返回結(jié)果我們可以去控制什么時候應(yīng)該render舆蝴,什么情況應(yīng)該render。
4.listview代替scrollview
使用listview我們可以設(shè)置首次render時要渲染的ui數(shù)量题诵,這樣一定程度上優(yōu)化了首次進(jìn)入頁面時所需要的渲染時間(renderHeader/pagesize)
5.使用InteractionManager
InteractionManager.runAfterInteractions(...)的官方文檔說的很清楚洁仗,通過他可以處理一些耗時操作,所以我個人建議把網(wǎng)絡(luò)請求放在次方法中去處理性锭,這樣很大程度上可以解決首次進(jìn)入時的卡頓赠潦。
6.使用Animated去處理一些簡單的動畫
我想應(yīng)該會有很多小伙伴遇到這樣的問題,切換不同的state改變某個view的height/width草冈,是不是很多小伙伴都會用state去控制height/width她奥。并不是說這樣是完全不對,只是這樣耗費性能怎棱,因為你的state的改變會觸發(fā)render哩俭,而對于一個過程來說,這樣的render次數(shù)是我們不愿意看到的拳恋,那該怎么解決呢凡资?其實大家可以使用Animated去代替state,Animated封裝了一系列優(yōu)雅的處理函數(shù)谬运,完全可以實現(xiàn)你想要的效果隙赁,使用方法官方有介紹垦藏。
React Native的優(yōu)化是一條漫漫長路,可路邊總會有一些風(fēng)景讓你覺的終點并不遙遠(yuǎn)伞访,再次感謝@天地之靈 大神的精彩分享掂骏,希望學(xué)習(xí)rn的小伙伴們共同去探討,共同去進(jìn)步咐扭。