React Native為應(yīng)用程序帶來了驚人的效果,但仍然存在一些性能上的問題。接下來介紹一些性能優(yōu)化方案。
1、shouldComponentUpdate的使用
使用shouldComponentUpdate方法,可以減少組件不必要的重新渲染。shouldComponentUpdate返回布爾值,根據(jù)該值,組件將重新呈現(xiàn)。例如,如果它返回true,那么它將重新呈現(xiàn),如果它返回false,那么它將不會重新呈現(xiàn)組件。
因此,在狀態(tài)更新或組件的新屬性時,將使用兩個名為nextState和nextProps的參數(shù)調(diào)用該方法。所以,你可以對比一下新的道具和狀態(tài)和之前的。并且根據(jù)你的業(yè)務(wù)邏輯需求,你可以使用布爾值再次呈現(xiàn)組件。
2、使用React的純成分
React的純組件有助于僅渲染已更改或狀態(tài)已更新的特定道具。例如,如果我們使用一個呈現(xiàn)1000行的平面列表。現(xiàn)在,在每次重新渲染時,將會再次渲染1000個數(shù)據(jù)。
在純組件中使用flatlist我們可以確保只有改變了所需的道具,組件才會重新渲染一次。
3、使用Hooks API中的備忘錄
React鉤子為函數(shù)提供了組件的生命周期。react的備忘錄有助于對即將到來的變化進(jìn)行淺顯的比較。因此,只有當(dāng)?shù)谰吒淖儠r,它才允許重新渲染功能。
4、只要有可能,就用本機驅(qū)動程序構(gòu)建模塊
有時,我們不得不使用一些原生可以更有效地完成的功能。此時,我們必須在本機中構(gòu)建該模塊,并可以通過創(chuàng)建一個橋來使用React Native的特性。
5、在構(gòu)建應(yīng)用程序之前,刪除控制臺日志
現(xiàn)已發(fā)現(xiàn),控制臺日志記錄需要一些時間。因此,在開發(fā)時使用它是很好的,但在生產(chǎn)版本中,它應(yīng)該被刪除,這將有助于提高應(yīng)用程序的性能,你將在使用它時意識到這一點。
6、減少應(yīng)用程序大小
在React Native中,你使用外部庫和組件表單庫,因此它會影響應(yīng)用程序的大小。為了減小尺寸,你必須優(yōu)化資源,使用ProGaurd,為不同的設(shè)備架構(gòu)創(chuàng)建不同的應(yīng)用程序大小,并確保壓縮圖形元素,即圖像。
JavaScript 端的組件使用橋接器與 Native 端通信。減少橋接器的負(fù)載并提高應(yīng)用程序的性能。
總結(jié)
這些是提升React原生應(yīng)用性能的小技巧。對于移動開發(fā)者而言,react-native只是開發(fā)箱中其中一種工具。豐富自己工具箱,才能有更寬的視野,更多的開發(fā)思路。