【React 學習筆記 EP.20】useContext

什麼是 useContext？

useContext 是 React 提供的一個 Hook，讓你可以跨層級傳遞資料，而不用一層一層手動傳 props。

useContext 概念

1. createContext：建立一個「廣播頻道」，定義你要共享的資料容器。
2. Provider：頻道的「發送端」，負責把資料廣播出去，所有被它包住的子元件都能收聽。
3. useContext：頻道的「接收器」，讓子元件直接取用 Provider 提供的資料。

useContext 語法

1. React.createContext(defaultValue)：建立 Context 物件；defaultValue 是找不到 Provider 時的預設值。
2. MyContext.Provider：包住需要接收資料的子元件。
3. value：你要廣播出去的資料內容。
4. useContext(MyContext)：傳入 Context 物件，回傳 Provider 中 value 的值。

import React, { createContext, useContext } from "react";

// 建立一個「主題色」的廣播頻道
const ThemeContext = createContext("light");

function DisplayTheme() {
  const theme = useContext(ThemeContext); // 接收廣播的主題色
  return <p>目前主題：{theme}</p>;       // 顯示接收到的值
}

export default function App() {
  return (
    // Provider 廣播 "dark" 給所有子元件
    <ThemeContext.Provider value="dark">
      <DisplayTheme />
    </ThemeContext.Provider>
  );
}