React Context สำหรับสถานะธีม

เริ่มด้วยการเรียก createContext() โดยส่งค่าเริ่มต้นที่มีโครงสร้างตรงกับบริบทของคุณ: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }) ระบบจะใช้ค่าเริ่มต้นนี้เฉพาะเมื่อคอมโพเนนต์อ่านบริบทโดยไม่มีผู้ให้บริการหลักครอบอยู่ ซึ่งช่วยให้ทดสอบคอมโพเนนต์แยกอิสระได้

คอมโพเนนต์ ThemeProvider เป็นตัวครอบที่เก็บตรรกะทั้งหมดเกี่ยวกับธีม โดยจะอ่านค่ากำหนดของระบบเมื่อเมานต์ จัดการสถานะ theme จัดเตรียมฟังก์ชัน toggleTheme และครอบคอมโพเนนต์ลูกด้วย ThemeContext.Provider value={{ theme, toggleTheme }} ควรวางคอมโพเนนต์นี้ไว้ใกล้ระดับบนสุดของลำดับชั้นคอมโพเนนต์

คอมโพเนนต์ลูกหลานใด ๆ สามารถเข้าถึงธีมได้ด้วยการเรียก useContext(ThemeContext) ซึ่งจะคืนค่าบริบทปัจจุบันที่มีทั้ง theme และ toggleTheme คอมโพเนนต์จะเรนเดอร์ใหม่โดยอัตโนมัติเมื่อธีมเปลี่ยน จึงซิงค์ข้อมูลให้ตรงกันอยู่เสมอโดยไม่ต้องส่งพร็อปผ่านคอมโพเนนต์หลายชั้น

ตัวแปร CSS ต้องอาศัยแอตทริบิวต์ data-theme บนอิลิเมนต์ราก ใน ThemeProvider ให้เพิ่ม useEffect ที่ทำงานทุกครั้งเมื่อ theme เปลี่ยน: document.documentElement.setAttribute('data-theme', theme) วิธีนี้เชื่อมสถานะของ React เข้ากับชั้น CSS ได้อย่างราบรื่น

หากต้องการเก็บตัวเลือกของผู้ใช้ไว้แม้โหลดหน้าใหม่ ให้เขียนค่าลงใน localStorage ทุกครั้งที่ธีมเปลี่ยน: localStorage.setItem('theme', theme) คุณสามารถห่อหุ้มตรรกะนี้ไว้ในฮุกแบบกำหนดเองชื่อ useLocalStorage ซึ่งคืนค่าคู่ที่มีลักษณะเหมือนสถานะและบันทึกการอัปเดตทุกครั้งโดยอัตโนมัติ

เมื่อเริ่มต้นสถานะธีม ให้พยายามอ่านค่าจาก localStorage ก่อน: localStorage.getItem('theme') หากไม่มีค่าที่บันทึกไว้ ให้ใช้ค่าทดแทนจากค่ากำหนดของระบบผ่าน window.matchMedia('(prefers-color-scheme: dark)').matches การเริ่มต้นนี้จะทำงานเพียงครั้งเดียวเมื่อเมานต์

ลำดับความสำคัญที่ถูกต้องจากสูงไปต่ำคือ ค่ากำหนดของผู้ใช้ที่บันทึกไว้ใน localStorage จากนั้นคือค่ากำหนดของระบบปฏิบัติการ และสุดท้ายคือค่าเริ่มต้นที่กำหนดตายตัว (โดยปกติคือธีมสว่าง) ลำดับนี้ทำให้ผู้ใช้ควบคุมขั้นสุดท้ายได้เสมอ ขณะเดียวกันก็ยังเคารพการตั้งค่าของระบบปฏิบัติการ หากผู้ใช้ยังไม่ได้เลือกธีมในแอปโดยเฉพาะ

การเรียก useContext(ThemeContext) โดยตรงในทุกคอมโพเนนต์จะเปิดเผยรายละเอียดการทำงานภายใน แทนที่จะทำเช่นนั้น ให้ส่งออกฮุก useTheme: function useTheme() { return useContext(ThemeContext); } จากนั้นคอมโพเนนต์สามารถนำเข้า useTheme และเรียกใช้ได้โดยไม่ต้องทราบเกี่ยวกับบริบทเบื้องหลัง

ฟังก์ชัน toggleTheme จะสลับระหว่าง light และ dark: setTheme(prev => prev === 'light' ? 'dark' : 'light') ให้เปิดเผยฟังก์ชันนี้ผ่านบริบท เพื่อให้ปุ่มใด ๆ ที่อยู่ที่ใดก็ได้ในลำดับชั้นสามารถเรียกใช้ได้ สถานะอยู่ที่เดียว ส่วนตรรกะการสลับใช้ร่วมกันได้ทั่วทั้งแอป

ออบเจ็กต์ค่าบริบทจะถูกสร้างขึ้นใหม่ทุกครั้งที่ ThemeProvider เรนเดอร์ ให้ห่อหุ้มออบเจ็กต์นี้ด้วย useMemo เพื่อป้องกันการเรนเดอร์ใหม่โดยไม่จำเป็นของผู้ใช้บริบททั้งหมด: const value = useMemo(() => ({ theme, toggleTheme }), [theme]) นี่เป็นการปรับปรุงประสิทธิภาพที่ใช้กันทั่วไปสำหรับผู้ให้บริบท

ในการทดสอบ ให้ครอบการเรนเดอร์ด้วยตัวช่วย renderWithTheme ที่กำหนดเอง โดยใช้ ThemeProvider เป็นตัวครอบ นอกจากนี้ยังสามารถสร้างบริบทจำลองแบบเรียบง่ายสำหรับการทดสอบแบบแยกอิสระได้: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }} วิธีนี้ช่วยให้ทดสอบคอมโพเนนต์ในสถานะธีมที่กำหนดได้

ลำดับความสำคัญที่ถูกต้องสำหรับการเริ่มต้นธีมของแอปจากสูงไปต่ำคืออะไร

สร้าง ThemeContext และ ThemeProvider ที่จัดการสถานะธีม ซิงค์กับ localStorage และกำหนด data-theme ให้กับเอกสาร ใช้ฮุก useTheme สำหรับเรียกใช้บริบทอย่างเป็นระเบียบ ลำดับความสำคัญคือ ค่ากำหนดที่บันทึกไว้ จากนั้นคือค่ากำหนดของระบบ และสุดท้ายคือค่าเริ่มต้น