React adalah pustaka JavaScript yang populer untuk membuat antarmuka pengguna, terutama aplikasi satu halaman (SPA). Sementara React menyederhanakan penciptaan aplikasi online interaktif dan dinamis, optimasi kecepatan menjadi semakin penting ketika kompleksitas aplikasi tumbuh. Tanpa optimasi yang cukup, kinerja mungkin menderita, mengarah ke rendering lambat, waktu beban yang lebih lama, dan pengalaman pengguna yang lebih buruk. Dalam artikel ini, kami akan melihat berbagai pendekatan untuk optimasi kinerja bereaksi untuk memastikan aplikasi Anda beroperasi dengan lancar dan efisien.
1. Gunakan alat kinerja bawaan React
React menyediakan beberapa alat bawaan untuk membantu pengembang memantau dan meningkatkan kinerja:
- Alat pengembang bereaksi: Plugin Chrome dan Firefox ini memungkinkan Anda untuk melihat pohon komponen React, menganalisis render, dan mengidentifikasi komponen mana yang secara berlebihan.
- API Profiler: Profiler React disertakan dengan React DevTools dan memungkinkan Anda untuk memvisualisasikan kinerja aplikasi React Anda dengan melacak perilaku rendering. Ini menyoroti komponen mana yang paling lama dibuat untuk dirender dan seberapa sering mereka diterjemahkan kembali.
2. Minimalkan re-render dengan harus componentupdate dan bereaksi.memo
Render ulang komponen yang tidak perlu dapat membahayakan kinerja, terutama jika komponennya kompleks atau membutuhkan perhitungan intensif. React menawarkan berbagai cara untuk mengelola re-render:
harus componentupdate (Komponen kelas): Metode siklus hidup ini mengembalikan hasil boolean, memungkinkan Anda untuk menentukan kapan komponen harus merender ulang. Jika Anda mengembalikan false, komponen tidak akan merender lagi.
kelas myComponent memperluas react.component {
harus componentupdate (nextprops, nextState) {
kembalikan nextprops.somevalue! == this.props.somevalue;
}
}
React.memo (komponen fungsional): React.Memo adalah komponen orde tinggi yang mencakup komponen fungsional dan menghindari render ulang yang berlebihan jika alat peraga komponen tetap tidak berubah.
const myComponent = react.memo (function mycomponent (props) {
kembali
{props.somevalue}
;
});
3. Komponen pemuatan malas
Pemuatan malas adalah teknik memuat hanya komponen atau potongan aplikasi yang diperlukan sesuai kebutuhan. Ini dapat secara dramatis menurunkan waktu pemuatan awal aplikasi Anda sambil meningkatkan kinerjanya yang dirasakan.
React's React.lazy and Suspense memungkinkan Anda memuat komponen secara dinamis:
const myComponent = react.lazy (() => import ('./ myComponent'));
function app () {
kembali (
}>
);
}
Dengan menggunakan pemuatan malas, Anda dapat membagi program Anda menjadi bundel yang lebih kecil yang dimuat hanya jika diperlukan, menghasilkan waktu beban awal yang lebih cepat.
4. Virtualisasi untuk daftar besar
Memberi daftar atau kisi -kisi besar mungkin merupakan masalah kinerja jika setiap item memerlukan render yang rumit. React Virtualisasi adalah perpustakaan yang memungkinkan Anda membuat hanya objek yang terlihat di viewport, meminimalkan jumlah elemen DOM sambil meningkatkan kecepatan.
Perpustakaan populer seperti react-window dan react-virtualed memberikan solusi yang dioptimalkan untuk merender kumpulan data besar dalam daftar virtual.
const mylist = () => (
tinggi = {400}
ItemCount = {1000}
ItemSize = {35}
lebar = {300}
>
{({index, style}) =>
Item {index}
}
);
5. Gunakan struktur data yang tidak dapat diubah
Struktur data yang tidak dapat diubah membantu menghindari re-render yang tidak diinginkan dengan membuatnya lebih mudah untuk mendeteksi perubahan. Menggunakan data yang tidak dapat diubah memungkinkan React untuk dengan mudah membandingkan keadaan lama dan baru, mengoptimalkan proses rendere-render.
Untuk menghasilkan struktur data yang tidak dapat diubah dalam JavaScript, memanfaatkan perpustakaan seperti Immutable.js atau IMMER. Pendekatan ini memungkinkan bereaksi untuk mengidentifikasi perubahan secara lebih efektif dan mengurangi jumlah re-render yang tidak diinginkan.
6. Mengoptimalkan Penggunaan API Konteks
API Konteks React memungkinkan Anda untuk mengkomunikasikan keadaan antara komponen tanpa harus mengirim alat peraga secara eksplisit. Namun, jika tidak digunakan dengan tepat, itu dapat menyebabkan kekhawatiran kinerja karena setiap kali nilai konteks berubah, semua komponen harus dirender ulang.
Untuk mengoptimalkan kinerja konteks:
- Hindari memperbarui nilai konteks terlalu sering.
- Gunakan memoisasi untuk menghindari penghitungan ulang nilai konteks yang tidak diinginkan.
- Pertimbangkan untuk menggunakan react.memo atau harus componentupdate untuk mengelola re-render dalam komponen yang mengkonsumsi konteks.
7. Input Pengguna Debounce dan Throttle
Jika aplikasi Anda bergantung secara luas pada input pengguna (seperti pencarian atau bidang formulir), debounce atau selipkan aktivitas pengguna untuk menghindari permintaan ulang yang tidak perlu atau permintaan API.
- Debuncing berarti menunda pelaksanaan suatu fungsi sampai jumlah waktu tertentu telah berlalu sejak acara terakhir.
- Pelambatan Membatasi berapa kali fungsi dapat dieksekusi dalam kerangka waktu tertentu.
Perpustakaan seperti Lodash memberikan metode yang nyaman untuk debouncing dan pelambatan.
impor {debounce} dari 'lodash';
const handlechange = debounce ((e) => {
Console.log (E.Target.Value);
}, 300);
8. Gunakan pekerja web untuk perhitungan berat
Jika aplikasi Anda membutuhkan perhitungan yang luas, cobalah outsourcing mereka ke pekerja web. Pekerja web memungkinkan Anda untuk menjalankan kode JavaScript di utas terpisah, menjaga utas UI agar tidak berhenti dan meningkatkan respons keseluruhan aplikasi Anda.
9. Mengoptimalkan gambar dan aset
Gambar dan aset besar dapat secara signifikan memperlambat aplikasi React Anda. Untuk mengoptimalkan gambar:
- Gunakan format yang lebih baru, seperti webp atau avif, untuk kompresi yang lebih baik.
- Menerapkan gambar responsif yang memuat secara berbeda sesuai dengan perangkat pengguna.
- Sebelum menambahkan foto ke proyek Anda, gunakan ImageOptim atau Tinypng untuk mengompresnya.
10. (SSR) dan (SSG)
Server-Side Rendering (SSR) dan Static Site Generation (SSG) adalah pendekatan untuk menghasilkan aplikasi React Anda di server daripada klien. Ini dapat meningkatkan kinerja aplikasi Anda, terutama pada beban awal, serta SEO -nya.
Kerangka kerja seperti Next.js termasuk dukungan bawaan untuk SSR dan SSG, membuat implementasi lebih mudah.
Kesimpulan
React Performance Optimization adalah proses berkelanjutan yang mengharuskan berbagai strategi dan teknologi. Memahami dan mengadopsi strategi optimasi ini-seperti komponen memoising, pemuatan malas, daftar virtual, dan rendering sisi server-dapat secara drastis meningkatkan kinerja aplikasi React Anda, memberikan pengguna pengalaman yang lebih cepat dan lebih halus. Ingatlah bahwa kinerja adalah masalah yang berkelanjutan, jadi sering profil aplikasi Anda, identifikasi hambatan, dan terapkan pendekatan optimasi yang relevan.
Disarankan:
10 Kesalahan yang Harus Dihindari dalam Pengembangan Aplikasi Native React.