Aplikasi Praktikal: Carian, Tatal, Ubah Saiz

Dalam komponen carian langsung, kekalkan dua pemboleh ubah keadaan yang berasingan: inputValue untuk masukan mentah (dikemas kini pada setiap ketikan, lalu memastikan medan masukan responsif) dan debouncedQuery daripada useDebounce(inputValue, 300) (dikemas kini 300ms selepas pengguna berhenti menaip, lalu mencetuskan panggilan ke pelayan). Pengasingan ini memberikan maklum balas visual serta-merta tanpa permintaan yang berlebihan.

Paparkan pemutar pemuatan sebaik sahaja pengguna mula menaip, bukan hanya apabila panggilan ke pelayan bermula. Tetapkan isLoading: true setiap kali inputValue !== debouncedQuery — kedua-duanya tidak segerak sementara nyah lantun masih menunggu. Setelah pertanyaan stabil dan pengambilan selesai, tetapkan nilainya kembali kepada false. Pengguna akan melihat penunjuk pemuatan yang responsif sepanjang proses.

Kesan paralaks atau bar kemajuan bacaan dikemas kini berdasarkan kedudukan tatal. Hadkan pengendali tatal kepada maksimum 60 bingkai sesaat menggunakan kelewatan 16ms: const throttledScrollY = useThrottle(scrollY, 16). Antara muka pengguna dikemas kini dengan lancar tanpa kos pengiraan semula kedudukan bagi setiap piksel tatal.

Mendengar perubahan saiz tetingkap untuk mengira semula reka letak sebaiknya dilakukan dengan nyah lantun, bukan pendikitan. Pengiraan reka letak hanya perlu dijalankan sekali selepas pengguna selesai mengubah saiz. Gunakan nyah lantun 200ms pada dimensi tetingkap. Semasa pengguna menyeret untuk mengubah saiz, antara muka pengguna boleh memaparkan keadaan yang dipermudah; reka letak yang dikira semula akan muncul apabila perubahan saiz berhenti.

Apabila debouncedQuery berubah, cipta AbortController baharu dan hantarkan signalnya kepada fetch(url, { signal }). Kembalikan fungsi pembersihan yang memanggil controller.abort(). Tindakan ini membatalkan sebarang permintaan yang sedang berjalan daripada pertanyaan terdahulu apabila pertanyaan yang dinyah lantun tiba, lalu mengelakkan keadaan perlumbaan apabila respons terdahulu yang perlahan menimpa respons kemudian yang lebih pantas.

Tanpa AbortController, jika pengguna menaip "re", menunggu, kemudian menaip "react", pertanyaan kedua mungkin kembali sebelum pertanyaan pertama (disebabkan oleh pencachean). Hasil carian akan memaparkan hasil React buat sementara waktu, kemudian ditimpa dengan hasil lapuk untuk "re". AbortController menghalang keadaan ini dengan membatalkan permintaan terdahulu sepenuhnya.

Menu lungsur ini menggabungkan nyah lantun untuk panggilan ke pelayan dengan keadaan serta-merta untuk paparan masukan. inputValue mengawal perkara yang muncul dalam medan teks. useDebounce(inputValue, 250) mengawal masa pengambilan cadangan dicetuskan. Senarai cadangan dipaparkan daripada keadaan hasil yang telah diambil, yang berasingan daripada kedua-dua keadaan masukan.

Pengesahan borang tak segerak, seperti menyemak sama ada alamat e-mel telah wujud, hendaklah dinyah lantun bagi mengelakkan pelayan dibebankan pada setiap ketikan. Gunakan nyah lantun 400ms pada nilai medan dan hantar permintaan pengesahan dalam useEffect yang bergantung pada nilai yang dinyah lantun. Paparkan pemutar pemuatan dalam medan sementara pengesahan masih menunggu.

Nyah lantun amat sesuai untuk menyimpan kandungan borang secara automatik semasa pengguna menaip. Tetapkan nyah lantun 1000ms pada objek nilai borang. Apabila nilai yang dinyah lantun berubah, cetuskan penyimpanan ke localStorage atau titik akhir pelayan. Pengguna akan melihat penunjuk "Menyimpan..." sementara nyah lantun masih menunggu dan "Disimpan" selepas permintaan selesai.

Nilai kelewatan ialah keputusan pengalaman pengguna. Untuk carian: 200-300ms mengimbangi responsif dengan pengurangan permintaan. Untuk perubahan saiz: 150-200ms boleh diterima kerana pengguna menjangka reka letak menjadi stabil selepas perubahan saiz. Untuk simpan automatik: 1000ms memberikan masa kepada pengguna untuk menaip satu ayat sebelum penyimpanan. Laraskan nilai berdasarkan kelajuan interaksi yang dijangka.

Aplikasi sebenar sering memerlukan beberapa pengoptimuman secara serentak. Penyunting dokumen mungkin menggunakan nyah lantun untuk simpan automatik (1s), pendikitan untuk pengiraan jumlah perkataan (500ms), dan IntersectionObserver untuk analitik. Teknik ini boleh digabungkan dengan baik kerana setiap satunya beroperasi secara berasingan menggunakan pemasa dan skopnya sendiri.

Gunakan useDebounce untuk masukan carian, pengendali perubahan saiz dan simpan automatik borang. Gunakan useThrottle untuk tatal dan pergerakan tetikus. Sentiasa gabungkan panggilan ke pelayan yang dinyah lantun dengan AbortController bagi mengelakkan keadaan perlumbaan. Paparkan keadaan pemuatan setiap kali inputValue !== debouncedQuery supaya antara muka pengguna kekal responsif dan informatif.