Bila Menggunakan State Global berbanding Setempat
Gunakan prinsip kolokasi: kekalkan state sedekat mungkin dengan penggunanya, dan naikkan hanya apabila berbilang komponen yang tidak berkaitan memerlukannya.
Bila Menggunakan State Global berbanding Setempat ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Persoalan Lokasi Keadaan
Setiap bahagian keadaan mempunyai tempat yang optimum. Memilih lokasi yang salah membawa kepada kesukaran meneruskan props antara komponen atau kerumitan keadaan global yang tidak perlu. Prinsip panduan: kekalkan keadaan sedekat mungkin dengan komponen yang menggunakannya.
Keadaan Komponen Setempat
Jika hanya satu komponen menggunakan keadaan itu, letakkan keadaan tersebut dalam useState/ref komponen itu. Tiada perkongsian diperlukan — kekalkan secara setempat. Ini kes paling mudah dan paling biasa.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Menaikkan Keadaan
Apabila dua komponen adik-beradik memerlukan keadaan yang sama, naikkan keadaan itu ke leluhur sepunya terdekat. Hantarkannya sebagai props dan fungsi panggil balik. Ini ialah pendekatan standard React/Vue sebelum menggunakan stor global.
Konteks Dikongsi — Perkongsian Tahap Pertengahan
Apabila keadaan perlu dikongsi merentas subpepohon tanpa meneruskan props melalui setiap komponen, Context (React) atau provide/inject (Vue) ialah alat yang sesuai. Ini untuk perkongsian berskop sederhana, seperti satu halaman atau modul ciri.
Stor Global — Keadaan Seluruh Aplikasi
Gunakan stor global (Redux, Zustand, Pinia) untuk keadaan yang: 1) diakses oleh banyak komponen yang tidak berkaitan, 2) perlu kekal selepas navigasi, 3) mempunyai logik kemas kini yang kompleks, 4) mendapat manfaat daripada pemeriksaan DevTools.
Contoh: Keadaan Setempat
Keadaan setempat sesuai untuk: nilai medan borang, petua alat yang dibuka atau ditutup, keterlihatan modal, keadaan tuding, keadaan animasi dan penunjuk pemuatan yang hanya berkaitan dengan satu komponen.
Contoh: Keadaan yang Dinaikkan
Keadaan yang dinaikkan sesuai untuk: penapis dikongsi yang digunakan oleh dua senarai adik-beradik, tab yang dipilih dalam kumpulan tab dan data borang yang dikongsi antara dua langkah.
Contoh: Konteks / Provide
Context sesuai untuk: tema semasa, pengguna yang disahkan, lokal atau bahasa, penanda ciri dan tindanan pemberitahuan — perkara yang digunakan pada banyak aras tetapi jarang dikemas kini.
Contoh: Stor Global
Stor global sesuai untuk: troli beli-belah, token pengesahan + objek pengguna, baris gilir pemberitahuan (mesej muncul dalam notifikasi timbul dari mana-mana) dan data masa nyata yang dipaparkan serentak oleh berbilang paparan.
Keadaan Pelayan berbanding Keadaan Klien
Data rangkaian (diperoleh daripada API) ialah kategori khas: keadaan pelayan. Ia memerlukan pengendalian pemuatan dan ralat, pencachean serta pembatalan kesahihan. React Query / SWR / TanStack Query mengurus keadaan pelayan supaya stor anda boleh fokus pada keadaan klien sebenar.
Kesilapan Biasa: Segalanya dalam Stor Global
Jangan letakkan semua keadaan dalam stor global hanya untuk berjaga-jaga. Keadaan setempat lebih murah, lebih mudah dan lebih mudah diuji. Penggunaan keadaan global secara berlebihan mewujudkan gandingan antara komponen yang sepatutnya tidak bergantung antara satu sama lain.
Kerangka Keputusan
Tanya: 1) Adakah komponen lain memerlukan ini? Tidak → setempat. 2) Adakah adik-beradik terdekat memerlukannya? Ya → naikkan. 3) Adakah subpepohon komponen memerlukannya? Ya → konteks/provide. 4) Adakah banyak komponen yang tidak berkaitan memerlukannya, atau adakah ia memerlukan DevTools? Ya → stor global.
Semakan Pantas
Di manakah anda patut menyimpan keadaan buka atau tutup bagi satu komponen akordion?
Imbas Kembali: Lokasi Keadaan
Prinsip: kekalkan keadaan sedekat mungkin dengan komponen yang menggunakannya. useState/ref setempat untuk keadaan satu komponen. Naikkan keadaan untuk perkongsian antara adik-beradik. Context/provide untuk perkongsian subpepohon. Stor global untuk keadaan seluruh aplikasi dengan kemas kini yang kompleks. Keadaan pelayan (data API) tergolong dalam React Query/SWR, bukan stor global.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Bila Menggunakan State Global berbanding Setempat” percuma?
Ya — teks penuh “Bila Menggunakan State Global berbanding Setempat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Bila Menggunakan State Global berbanding Setempat”?
Gunakan prinsip kolokasi: kekalkan state sedekat mungkin dengan penggunanya, dan naikkan hanya apabila berbilang komponen yang tidak berkaitan memerlukannya. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Bila Menggunakan State Global berbanding Setempat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Redux Toolkit: createSlice dan configureStore
- Zustand untuk State React Ringan
- Pinia untuk Vue: defineStore dan storeToRefs
- Bila Menggunakan State Global berbanding Setempat