Jika anda seorang pembangun React, ini adalah pertaruhan yang selamat anda telah menemui air terjun - juga dipanggil air terjun permintaan atau air terjun rangkaian. Bentuknya yang tersendiri muncul dalam alatan analitik apabila anda pergi cuba lihat perkara yang mengambil halaman yang anda reka dengan susah payah mengambil masa yang lama untuk dimuatkan.

Dalam catatan blog ini, kita akan membincangkan apa itu air terjun, sebab ia berlaku, cara ia mempengaruhi aplikasi React anda dan, yang paling penting, cara mengelakkannya.

Apakah Air Terjun Fetch?

Mari mulakan dengan perkara asas.

Air terjun pengambilan ialah isu prestasi yang berlaku apabila berbilang panggilan API atau permintaan pengambilan dirantai bersama dan dilaksanakan satu demi satu. Daripada menghantar berbilang permintaan secara selari (yang membolehkan mereka menyelesaikan secara serentak), permintaan itu akan dibariskan dan dilaksanakan mengikut turutan. Ini mengakibatkan kelewatan yang ketara dalam pemaparan halaman, terutamanya jika bilangan pengambilan meningkat.

Berikut ialah gambaran visual ringkas tentang rupa ini:

Sumber: Sentry.io

Daripada imej di atas, anda boleh melihat dengan jelas kelewatan berurutan dalam corak 'air terjun'. Setiap permintaan bermula hanya selepas yang sebelumnya telah selesai. Dalam amalan, walaupun sedikit kelewatan dalam satu permintaan boleh menyebabkan keseluruhan masa pemuatan halaman meningkat secara mendadak.

Ini amat menyusahkan pengalaman pengguna, kerana pengguna web moden mengharapkan aplikasi memuatkan pantas. Kelewatan beberapa saat boleh menyebabkan kadar lantunan yang lebih tinggi dan penglibatan yang lebih rendah, yang memberi kesan kepada kejayaan keseluruhan aplikasi anda.

Mengapa Ambil Air Terjun Berlaku?

Ambil air terjun dalam React biasanya berlaku disebabkan oleh struktur hierarki komponen. Berikut ialah senario biasa:

1. Komponen Induk Mengambil Data: Komponen induk memulakan permintaan pengambilan apabila ia dipasang.
2. Data Komponen Kanak-kanak Menunggu: Komponen kanak-kanak bergantung pada data yang diambil oleh ibu bapa dan dipaparkan hanya setelah data ibu bapa tersedia.
3. Permintaan Berurutan: Jika terdapat berbilang komponen bersarang, setiap satu mungkin mencetuskan permintaan pengambilan secara berurutan, menyebabkan kesan "air terjun".

Tingkah laku berlatarkan ini berlaku kerana komponen dalam React dibuat secara tidak segerak. Apabila komponen induk mengambil data, komponen anak mungkin perlu menunggu sehingga permintaan ibu bapa selesai. Jika pengambilan ini tidak dikendalikan dengan cekap, anda boleh mengalami kelewatan yang ketara kerana setiap permintaan bergantung pada permintaan sebelumnya.

Cara Mengenalpasti Air Terjun Ambil

Untuk mengenal pasti sama ada aplikasi React anda mengalami fetch waterfall, anda boleh menggunakan alatan seperti Chrome DevTools atau React DevTools untuk memantau permintaan dan prestasi rangkaian. Dalam Chrome DevTools, navigasi ke tab Rangkaian dan cari panggilan API berurutan yang menyekat proses pemuatan halaman.

Dalam React DevTools, anda boleh memeriksa pemaparan semula komponen dan mengenal pasti sebarang kebergantungan yang tidak perlu menyebabkan permintaan pengambilan dicetuskan beberapa kali.

Berikut adalah beberapa tanda bahawa air terjun mengambil mungkin berlaku:

• Masa pemuatan halaman perlahan: Jika halaman anda mengambil masa lebih lama daripada yang dijangkakan untuk dimuatkan.
• Corak prestasi yang mencurigakan: Jika anda melihat satu siri panggilan API yang kelihatan dibuat satu demi satu dan bukannya selari.

Cara Mencegah Pengambilan Air Terjun dalam Reaksi

Nasib baik, terdapat beberapa strategi untuk mengelak daripada mengambil air terjun dan mengoptimumkan aplikasi React anda untuk prestasi yang lebih baik.

1. Ambil Data Secara Selari

Daripada menunggu setiap permintaan API selesai sebelum memulakan permintaan seterusnya, pertimbangkan untuk melaksanakan berbilang permintaan pengambilan secara selari. Ini boleh dilakukan menggunakan kaedah Promise.all() JavaScript, yang membolehkan anda menjalankan berbilang janji serentak.

Berikut ialah contoh pengambilan data secara selari:

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

Dengan mengambil data secara selari, anda mengurangkan jumlah masa menunggu dan membenarkan penyemak imbas memuatkan sumber dengan lebih cepat.

2. Decouple Component Data Fetching

Anda boleh memfaktorkan semula komponen anda supaya mereka tidak bergantung pada data komponen induk untuk mencetuskan pengambilan mereka sendiri. Sebaliknya, biarkan setiap komponen kanak-kanak mengendalikan pengambilan datanya sendiri secara bebas. Ini boleh dilakukan dengan menaikkan keadaan dan menurunkan data yang diperlukan atau dengan menggunakan pustaka seperti React Query atau SWR untuk mengurus pengambilan pada peringkat komponen.

3. Gunakan React Query atau SWR

Perpustakaan seperti React Query dan SWR bagus untuk mengurus pengambilan data dalam aplikasi React. Mereka mengendalikan caching, pengambilan data latar belakang dan pengendalian ralat, sambil turut membenarkan anda mengambil data secara selari dengan cekap.

React Query, contohnya, mengendalikan caching, cuba semula dan penyegerakan latar belakang secara automatik untuk pengambilan data, memastikan komponen anda tidak menunggu data tanpa perlu dan panggilan rangkaian hanya dibuat apabila diperlukan.

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

4. Data Cache untuk Mengurangkan Permintaan Berlebihan

Caching boleh mengurangkan keperluan untuk permintaan berlebihan kepada pelayan dengan ketara. Dengan menyimpan data yang diambil secara setempat (dalam keadaan komponen, konteks atau perpustakaan caching seperti React Query), anda boleh mengelakkan permintaan rangkaian yang tidak perlu, menjadikan aplikasi anda lebih pantas dan cekap.

Kesimpulan

Ambil air terjun dalam React boleh menjadi sumber utama kesesakan prestasi, tetapi dengan strategi yang betul, ia boleh dielakkan dengan mudah. Dengan mengambil data secara selari, mengasingkan pengambilan data daripada komponen dan memanfaatkan perpustakaan yang berkuasa seperti React Query, anda boleh meningkatkan prestasi aplikasi React anda dan meningkatkan pengalaman pengguna.

Jika anda berhadapan dengan air terjun yang kerap diambil dalam pangkalan kod React anda, anda patut mengambil langkah ke belakang untuk menganalisis corak pengambilan data anda dan melaksanakan amalan terbaik ini. Akhirnya, mengoptimumkan cara aplikasi anda berinteraksi dengan API akan menghasilkan aplikasi yang lebih pantas, lebih dipercayai dan berskala.

Atas ialah kandungan terperinci Memahami dan Mencegah Pengambilan Air Terjun dalam Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!