useContext สำหรับสถานะส่วนกลาง
สร้าง Context ครอบส่วนย่อยของต้นไม้ด้วย Provider และใช้ useContext เพื่อแชร์สถานะธีมหรือการยืนยันตัวตนโดยไม่ต้องส่ง props ผ่านคอมโพเนนต์หลายชั้น
useContext สำหรับสถานะส่วนกลาง เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหาของการส่งพร็อพต่อทอด
การส่งพร็อพต่อทอดหมายถึงการส่งข้อมูลผ่านองค์ประกอบกลางหลายชั้นที่ไม่ได้ใช้ข้อมูลนั้น เพียงเพื่อให้ข้อมูลไปถึงองค์ประกอบลูกที่อยู่ลึกลงไป Context แก้ปัญหานี้ด้วยการทำให้ค่าใดค่าหนึ่งพร้อมใช้งานสำหรับองค์ประกอบใดก็ได้ในต้นไม้ โดยไม่ต้องส่งผ่านอย่างชัดเจน
การสร้าง Context
createContext(defaultValue) จะสร้างอ็อบเจ็กต์ Context ค่าเริ่มต้นจะถูกใช้เมื่อองค์ประกอบอ่านบริบทโดยไม่มี Provider ที่ตรงกันอยู่ด้านบน
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});การจัดเตรียม Context
ห่อส่วนของต้นไม้ที่ต้องใช้บริบทด้วย Provider องค์ประกอบทั้งหมดภายในจะสามารถอ่านค่าของบริบทได้
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>การอ่านค่าด้วย useContext
คอมโพเนนต์ใด ๆ ภายในผู้ให้บริการสามารถเข้าถึงค่าของบริบทด้วย useContext(ThemeContext) ได้ โดยไม่จำเป็นต้องส่งอะไรผ่านพร็อพ
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}ฮุกแบบกำหนดเองสำหรับครอบ useContext
ส่งออกฮุกแบบกำหนดเองที่เรียกใช้ useContext ภายใน วิธีนี้สะอาดกว่าการเปิดให้เข้าถึงบริบทโดยตรง และทำให้คุณเพิ่มการตรวจสอบความถูกต้องได้
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();การเรนเดอร์ใหม่ของบริบท
เมื่อค่าของผู้ให้บริการเปลี่ยน คอมโพเนนต์ผู้ใช้บริบททั้งหมดจะเรนเดอร์ใหม่ หากค่าเป็นอ็อบเจ็กต์ การสร้างการอ้างอิงอ็อบเจ็กต์ใหม่ในการเรนเดอร์แต่ละครั้งจะทำให้คอมโพเนนต์ผู้ใช้บริบททั้งหมดเรนเดอร์ใหม่ ใช้ useMemo เพื่อจดจำค่าและป้องกันปัญหานี้
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>ควรใช้บริบทเมื่อใด
เหมาะสำหรับ: ธีม ภาษาและภูมิภาค ผู้ใช้ที่เข้าสู่ระบบแล้ว ตัวเลือกฟีเจอร์ และระบบการแจ้งเตือน ไม่เหมาะนักสำหรับ: การอัปเดตความถี่สูง (ทุกครั้งที่กดแป้นพิมพ์) และสถานะขนาดใหญ่ที่ซับซ้อน (ใช้ที่เก็บสถานะแทน)
บริบทหลายชุด
คุณสามารถมีบริบทอิสระหลายชุดได้ ควรให้แต่ละบริบทมีหน้าที่เฉพาะ เช่น ใช้ AuthContext สำหรับการยืนยันตัวตน และ ThemeContext สำหรับธีม หลีกเลี่ยงบริบทขนาดใหญ่เพียงชุดเดียวที่เก็บทุกอย่างไว้
บริบทเทียบกับ Redux
บริบทมีมาให้ในตัวและเพียงพอสำหรับข้อมูลส่วนกลางที่เปลี่ยนไม่บ่อย ส่วน Redux/Zustand/Pinia เหมาะกว่าสำหรับสถานะที่ซับซ้อนและมีการอัปเดตจำนวนมาก ต้องการการดีบักแบบย้อนเวลา หรือต้องใช้ตัวกลาง
รูปแบบบริบทสำหรับการยืนยันตัวตน
รูปแบบที่ใช้กันทั่วไปคือ AuthContext ที่เก็บผู้ใช้ปัจจุบันและวิธีการยืนยันตัวตน คอมโพเนนต์ที่ใช้บริบทจะได้รับข้อมูลผู้ใช้โดยไม่ต้องส่งผ่านพร็อพหลายชั้น
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};บริบทกับ TypeScript
กำหนดชนิดของบริบทด้วยอินเทอร์เฟซ ใช้ null เป็นค่าเริ่มต้น แล้วโยนข้อผิดพลาดในฮุกแบบกำหนดเองหากค่าเป็น null วิธีนี้จะป้องกันไม่ให้สถานะที่เป็นไปไม่ได้ ซึ่งคือการใช้บริบทภายนอกผู้ให้บริการ เกิดขึ้นโดยไม่แจ้งเตือน
ประสิทธิภาพ: memo + บริบท
คอมโพเนนต์ที่ครอบด้วย React.memo จะไม่เรนเดอร์ใหม่ เว้นแต่พร็อพจะเปลี่ยน หากผลลัพธ์ของคอมโพเนนต์ผู้ใช้บริบทขึ้นอยู่กับบริบทเพียงบางส่วน ให้แยกบริบทหรือใช้รูปแบบตัวเลือกเพื่อหลีกเลี่ยงการเรนเดอร์ใหม่ที่ไม่จำเป็น
ตรวจสอบความเข้าใจ
เมื่อเรียกใช้ useContext(MyContext) ภายในคอมโพเนนต์ที่ไม่มีผู้ให้บริการอยู่เหนือขึ้นไป จะได้ค่าอะไร
ทบทวน: useContext
createContext สร้างบริบทพร้อมค่าเริ่มต้น ครอบต้นไม้คอมโพเนนต์ด้วยผู้ให้บริการเพื่อกำหนดค่า useContext อ่านค่าได้จากทุกจุดภายในนั้น ฮุกแบบกำหนดเองช่วยครอบ useContext เพื่อทำการตรวจสอบ จดจำค่าของผู้ให้บริการเพื่อป้องกันการเรนเดอร์ใหม่ที่ไม่จำเป็น ใช้สำหรับข้อมูลส่วนกลางที่เปลี่ยนไม่บ่อย เช่น ธีมและการยืนยันตัวตน
คำถามที่พบบ่อย
บทเรียน “useContext สำหรับสถานะส่วนกลาง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “useContext สำหรับสถานะส่วนกลาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “useContext สำหรับสถานะส่วนกลาง”
สร้าง Context ครอบส่วนย่อยของต้นไม้ด้วย Provider และใช้ useContext เพื่อแชร์สถานะธีมหรือการยืนยันตัวตนโดยไม่ต้องส่ง props ผ่านคอมโพเนนต์หลายชั้น คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “useContext สำหรับสถานะส่วนกลาง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- useContext สำหรับสถานะส่วนกลาง
- useReducer สำหรับสถานะที่ซับซ้อน
- useMemo และ useCallback เพื่อประสิทธิภาพ
- Custom Hooks: แยกตรรกะที่นำกลับมาใช้ซ้ำได้