【React 學習筆記 EP.13】Global State

什麼是 Global State？

Global State（全域狀態）就是整個應用程式都能共用的資料儲存空間。

Global State 概念

1. createContext：建立一個空的 Context 物件，之後 Provider 和子元件都透過這個 Context 物件溝通。
2. Provider：用 value 把資料送進 Context 物件，被它包住的子元件都接收得到。
3. useContext：在任何子元件中呼叫，就能直接取得 Provider 提供的資料，不必透過 props 層層傳遞。

Global State 語法

1. createContext(defaultValue)：建立 Context 物件；defaultValue 是找不到 Provider 時的預設值。
2. <MyContext.Provider value={data}>：將 data 廣播給所有被包住的子元件。
3. useContext(MyContext)：在子元件中取出 Provider 傳入的 value。

// Global State 語法
const MyContext = createContext(defaultValue)
```

```JavaScript
import { createContext, useContext, useState } from 'react'

// 建立一個 Context 物件
const NameContext = createContext()

function Display() {
  const name = useContext(NameContext) // 從 Context 物件取得資料
  return <p>你好，{name}！</p>
}

export default function App() {
  const [name, setName] = useState('小明') // 建立可變動的狀態
  return (
    // Provider 把 name 廣播給所有子元件
    <NameContext.Provider value={name}>
      <Display />
      <button onClick={() => setName('小華')}>換人</button>
    </NameContext.Provider>
  )
}