Konteks React untuk Keadaan Tema

Mulakan dengan memanggil createContext() menggunakan nilai lalai yang sepadan dengan bentuk konteks anda: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Nilai lalai ini hanya digunakan apabila komponen membaca konteks tanpa Provider induk, yang membantu dalam ujian komponen secara berasingan.

Komponen ThemeProvider ialah pembungkus yang mengandungi semua logik tema. Komponen ini membaca keutamaan sistem semasa dipasang, mengurus keadaan theme, menyediakan fungsi toggleTheme, dan membungkus anak-anaknya dalam ThemeContext.Provider value={{ theme, toggleTheme }}. Letakkannya berhampiran bahagian atas pepohon komponen anda.

Mana-mana komponen keturunan boleh mengakses tema dengan memanggil useContext(ThemeContext). Fungsi ini mengembalikan nilai konteks semasa, termasuk theme dan toggleTheme. Komponen itu dipaparkan semula secara automatik apabila tema berubah, jadi keadaannya sentiasa disegerakkan tanpa perlu menghantar prop secara berantai.

Pemboleh ubah CSS bergantung pada atribut data-theme pada elemen akar. Dalam ThemeProvider, tambahkan useEffect yang dijalankan setiap kali theme berubah: document.documentElement.setAttribute('data-theme', theme). Ini menghubungkan keadaan React dengan lapisan CSS dengan lancar.

Untuk mengekalkan pilihan pengguna selepas halaman dimuat semula, tulis ke localStorage setiap kali tema berubah: localStorage.setItem('theme', theme). Anda boleh merangkumkan logik ini dalam cangkuk tersuai useLocalStorage yang mengembalikan pasangan seperti keadaan dan mengekalkan setiap kemas kini secara automatik.

Semasa memulakan keadaan tema, baca localStorage terlebih dahulu: localStorage.getItem('theme'). Jika tiada nilai tersimpan, gunakan keutamaan sistem sebagai sandaran melalui window.matchMedia('(prefers-color-scheme: dark)').matches. Pemulaan ini hanya dijalankan sekali apabila komponen dipasang.

Turutan keutamaan yang betul daripada paling tinggi kepada paling rendah ialah: keutamaan pengguna yang tersimpan dalam localStorage, kemudian keutamaan sistem OS, dan akhirnya nilai lalai yang ditetapkan dalam kod, biasanya tema cerah. Turutan ini memastikan pengguna sentiasa mempunyai kawalan terakhir, sambil tetap menghormati konfigurasi OS mereka jika mereka belum membuat pilihan secara jelas dalam aplikasi.

Memanggil useContext(ThemeContext) secara terus dalam setiap komponen mendedahkan butiran pelaksanaan. Sebaliknya, eksportkan cangkuk useTheme: function useTheme() { return useContext(ThemeContext); }. Komponen kini mengimport useTheme dan memanggilnya tanpa perlu mengetahui konteks asas yang digunakan.

Fungsi toggleTheme bertukar antara light dan dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Dedahkan fungsi ini melalui konteks supaya mana-mana butang di mana-mana bahagian pepohon boleh mencetuskannya. Keadaan disimpan di satu tempat, manakala logik togol dikongsi di seluruh aplikasi.

Objek nilai konteks dicipta semula pada setiap pemaparan ThemeProvider. Bungkusnya dalam useMemo untuk mengelakkan semua pengguna konteks dipaparkan semula tanpa perlu: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Ini ialah pengoptimuman prestasi yang biasa digunakan untuk penyedia konteks.

Dalam ujian, bungkus pemaparan dalam utiliti tersuai renderWithTheme yang menggunakan ThemeProvider sebagai pembungkus. Anda juga boleh mencipta konteks olok-olok yang ringkas untuk ujian berasingan: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Dengan ini, anda boleh menguji komponen dalam keadaan tema tertentu.

Cipta ThemeContext dan ThemeProvider yang mengurus keadaan tema, menyegerakkannya dengan localStorage, dan menetapkan data-theme pada dokumen. Gunakan cangkuk kemudahan useTheme untuk penggunaan yang kemas. Turutan keutamaannya ialah: pilihan tersimpan, kemudian keutamaan sistem, dan akhirnya nilai lalai.