Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Menggunakan aplikasi seluler seharusnya menjadi pengalaman yang menyenangkan, tanpa penundaan yang membuat frustrasi. Sebagai pengembang React Native, penting bagi Anda untuk mengoptimalkan aplikasi Anda, sehingga berfungsi dengan baik dan mudah digunakan. Performa aplikasi puncak mengharuskan Anda menulis kode yang bersih dan efisien menggunakan alat dan pustaka yang tepat.

Lihatlah tips dan teknik ini untuk mengoptimalkan kinerja aplikasi React Native Anda.

1. Kurangi Re-Render yang Tidak Perlu Dengan useMemo Hook

React Native merender komponen menggunakan teknologi Virtual DOM (VDOM). VDOM melacak semua perubahan pada komponen aplikasi dan merender ulang seluruh hierarki tampilan bila dianggap perlu. Proses ini mahal, jadi Anda harus menghindari pembaruan yang tidak perlu pada status dan properti komponen.

Pustaka React menyediakan

instagram viewer
useMemo Dan gunakanCallback kait untuk memecahkan masalah ini dalam komponen fungsional. Anda dapat menggunakan kait useMemo untuk memoize nilai yang dihasilkan dari fungsi JavaScript bahwa Anda tidak ingin menghitung ulang pada setiap render.

Berikut adalah contoh bagaimana Anda dapat menggunakan useMemo kait:

impor { useMemo } dari'reaksi';
fungsiKomponen Saya({data}) {
// Fungsi computeExpensiveValue adalah komputasi yang mahal
// tidak perlu dihitung ulang pada setiap render.
const Nilaimahal = useMemo(() => computeExpensiveValue (data), [data]);
// Komponen dapat menggunakan nilai memoized tanpa menghitung ulang 
// pada setiap render.
kembali
{nilaimahal}</div>;
}

Membungkus menghitungNilaiMahal berfungsi di dalam useMemo hook memoizes hasil dari fungsi. Itu useMemo hook dapat menerima argumen kedua sebagai ketergantungan. Ini berarti fungsi memoized hanya akan berjalan ketika ketergantungan ini berubah.

gunakanCallback mirip dengan useMemo, tetapi memoisasi fungsi panggilan balik alih-alih nilai. Ini dapat berguna untuk mencegah render ulang komponen anak yang tidak perlu yang dipicu oleh fungsi callback yang diturunkan sebagai prop.

2. Penanganan Data Negara yang Efektif

Manajemen status yang buruk dapat menyebabkan ketidakkonsistenan data, yang mengarah ke perilaku tak terduga yang sulit dilacak dan diperbaiki. Manajemen status yang baik mencakup menghindari penyimpanan data yang tidak perlu di status, yang dapat memperlambat aplikasi dan mempersulit proses debug. Penting untuk memastikan bahwa semua status yang Anda simpan benar-benar diperlukan untuk merender komponen.

Cara lain untuk memperbarui status secara efektif adalah dengan menggunakan teknik kekekalan, seperti operator spread atau the Objek.assign() metode.

Misalnya:

impor Bereaksi, { useState } dari'reaksi';
fungsiKomponen Saya() {
const [status, setState] = useState({
 menghitung: 0,
 teks: 'Halo'
 });


fungsihandleClick() {
 setState(prevState => {
kembaliObyek.assign({}, prevState, { hitung: prevState.count + 1 });
 });
 }
kembali (

Dalam contoh ini, handleClick fungsi menggunakan setState kait untuk memperbarui status. Tetap saja, alih-alih langsung memodifikasi objek status, ia menggunakan Objek.assign() metode untuk membuat objek baru yang menyalin status sebelumnya dengan properti count yang dimodifikasi. Pendekatan ini memungkinkan DOM virtual React untuk merender ulang komponen ketika mengetahui bahwa Anda telah memperbarui statusnya.

Anda juga dapat menggunakan perpustakaan manajemen negara seperti Redux dan API konteks bawaan untuk menerapkan teknik ini.

3. Menerapkan Sistem Pemantauan Kinerja

Sistem pemantauan kinerja aplikasi seluler (PMS) adalah alat yang memungkinkan Anda mengukur dan menganalisis kinerja aplikasi seluler Anda. Mereka menyediakan fitur seperti pemantauan waktu nyata, pelaporan kerusakan, pemantauan jaringan, metrik kinerja, dan pemutaran ulang sesi pengguna. Menggunakan sistem pemantauan kinerja dengan aplikasi React Native Anda akan memungkinkan Anda mengidentifikasi hambatan kinerja untuk memperbaiki dan menskalakan aplikasi Anda.

Berikut adalah daftar beberapa alat PMC yang tersedia.

  • React Native Debugger: Aplikasi mandiri yang memungkinkan Anda melakukan debug dan memeriksa status aplikasi React Native Anda. Ini juga mencakup monitor kinerja untuk membantu Anda mengidentifikasi dan memperbaiki masalah kinerja.
  • React Native Profiler: Alat pemantau kinerja bawaan ini memungkinkan Anda memantau kinerja aplikasi dengan mengukur waktu yang diperlukan untuk merender setiap komponen.
  • Flipper: Platform pengembangan aplikasi seluler dengan monitor kinerja yang dapat membantu Anda mengidentifikasi dan memperbaiki masalah kinerja.
  • Pemantauan Kinerja Firebase: Alat pemantauan kinerja yang disediakan oleh Firebase yang memungkinkan Anda melacak kinerja aplikasi Anda di berbagai perangkat dan platform.

4. Hapus Pernyataan Console.log

Saat pernyataan console.log berjalan, ia mengirim pesan ke mesin JavaScript untuk mencatat pesan ke konsol. Mesin JS kemudian membutuhkan waktu untuk memproses dan menampilkan pesan.

Terlalu banyak pernyataan konsol dalam kode Anda akan memperlambat eksekusinya dan menyebabkan keterlambatan kinerja. Ini bisa menjadi masalah terutama saat aplikasi Anda berjalan di perangkat dengan sumber daya terbatas, seperti perangkat seluler kelas bawah.

5. Bangun Sistem Navigasi yang Efisien

Sistem navigasi yang baik akan meningkatkan keseluruhan struktur aplikasi React Native Anda, membuatnya lebih mudah untuk memelihara, memperbarui fitur, dan meneruskan data status secara efisien. Selain itu, beralih di antara beberapa tampilan dalam aplikasi Anda jauh lebih mudah, sehingga meningkatkan pengalaman pengguna.

Anda harus mempertimbangkan faktor-faktor seperti pola navigasi yang tepat (berbasis tab, berbasis tumpukan, berbasis laci, dll.) agar sesuai dengan aplikasi Anda. Pertimbangkan jumlah layar yang Anda harapkan di aplikasi Anda, dan bagaimana Anda akan meneruskan data status di antara layar tersebut.

Caching adalah metode yang berguna untuk mengembangkan sistem navigasi yang andal. Caching memungkinkan Anda menyimpan status layar atau komponen saat pengguna meninggalkannya, lalu memulihkannya saat mereka kembali. Ini membantu meminimalkan jumlah data yang perlu Anda muat dan berapa kali Anda perlu merender ulang.

React Native memiliki beberapa library yang tersedia untuk navigasi, seperti React Navigation dan React Native Navigation. Anda bisa menggunakannya untuk mengimplementasikan beberapa pola navigasi umum ini di aplikasi Anda.

6. Kurangi Ukuran Aplikasi Dengan Pemisahan Kode dan Lazy Loading

Ukuran aplikasi penting untuk mengoptimalkan kinerja karena dapat memengaruhi aspek pengalaman pengguna, seperti waktu muat awal, penggunaan memori, dan ruang penyimpanan.

Pemecahan kode dan pemuatan lambat adalah teknik yang dapat mengurangi ukuran aplikasi React Native Anda dan meningkatkan kinerja.

Pemecahan kode adalah proses memecah basis kode JavaScript yang besar menjadi "bundel" yang lebih kecil dan lebih mudah dikelola. Ini dapat secara signifikan mengurangi waktu muat awal aplikasi.

Pemuatan lambat adalah teknik yang memungkinkan Anda memuat komponen saat pengguna membukanya, bukan saat memulai. Ini dapat membantu mengurangi jumlah memori yang digunakan aplikasi Anda dan meningkatkan kinerja secara keseluruhan.

Mengapa Optimalisasi Kinerja Penting

Optimalisasi kinerja sangat penting untuk keberhasilan aplikasi seluler apa pun. Aplikasi yang lambat dapat menyebabkan pengalaman pengguna yang buruk dan pada akhirnya menghasilkan interaksi dan retensi yang rendah.

Trik ini hanyalah beberapa cara yang dapat Anda manfaatkan untuk memastikan pengalaman yang menyenangkan bagi basis pengguna aplikasi Anda.