第十一章：useContext —— 中央空调系统

1 分钟 70 字第 33 / 962 个阅读单元

如果家里有 10 个房间，每个房间都需要知道“当前是夏天还是冬天”，你不想一层层传 props。useContext = 中央广播系统。

tsx

const SeasonContext = createContext('summer');

function App() {
  const [season, setSeason] = useState('summer');

  return (
    <SeasonContext.Provider value={season}>
      <House />
    </SeasonContext.Provider>
  );
}

function AirConditioner() {
  const season = useContext(SeasonContext);

  return (
    <div>
      模式: {season === 'summer' ? '制冷' : '制热'}
    </div>
  );
}

text

App (Provider 发射塔)
 │
 │ 广播: season = "summer"
 ├── House
 │    └── Room
 │         └── AC ← 直接收听
 └── Garage
      └── AC ← 也能直接收听