[TOC] ## Context Context 允許父組件向其下層無論多深的任何組件提供信息，而無需通過 props 顯式傳遞 **場景** * **主題：**如果你的應用允許用戶更改其外觀（例如暗夜模式），你可以在應用頂層放一個 context provider，并在需要調整其外觀的組件中使用該 context。 * **當前賬戶：**許多組件可能需要知道當前登錄的用戶信息。將它放到 context 中可以方便地在樹中的任何位置讀取它。某些應用還允許你同時操作多個賬戶（例如，以不同用戶的身份發表評論）。在這些情況下，將 UI 的一部分包裹到具有不同賬戶數據的 provider 中會很方便。 * **路由：**大多數路由解決方案在其內部使用 context 來保存當前路由。這就是每個鏈接“知道”它是否處于活動狀態的方式。如果你創建自己的路由庫，你可能也會這么做。 * **狀態管理：**隨著你的應用的增長，最終在靠近應用頂部的位置可能會有很多 state。許多遙遠的下層組件可能想要修改它們。通常[將 reducer 與 context 搭配使用](https://zh-hans.react.dev/learn/scaling-up-with-reducer-and-context)來管理復雜的狀態并將其傳遞給深層的組件來避免過多的麻煩。 ## 示例 ``` import { useReducer, createContext, useContext, useState } from 'react'; const color = createContext('red') export default function Demo() { // 直接 Context 修改值 const [value, setValue] = useState('red') return <div> {/* 修改 Context 的值 */} <color.Provider value={value}> <Hello >hello</Hello> <Hello1 /> {/* 再次更改 Context 的值 */} <color.Provider value={'green'}> <Hello3/> </color.Provider> <button onClick={() => setValue('blue')}>change</button> </color.Provider> </div> } export function Hello({ children }: { children: React.ReactNode }) { const value = useContext(color) return <h1 style={{ color: value }}>{children}</h1> } export function Hello1() { const value = useContext(color) return <h1 style={{ color: value }}>hello1</h1> } export function Hello3() { const value = useContext(color) return <h1 style={{ color: value }}>hello3</h1> } ```