資料父傳子props是最常見的形式，若今天資料想要傳給同層的兄弟姊妹或是傳給下下層的元件呢? useContext就出場拉! 但我們先要了解什麼是Global State。

Global State

之前說render是蓋房子，那房子與房子之間的公共區域就是我們的Global State，每個有房子擁有權的人都可以使用這個公共區域的資源。

範例

在一個新網站的UI中我們設定好每個頁面按鈕需統一顏色，那麼我們可以先建立一個顏色資料庫，再使用useContext創造出一個Global State資料庫，讓每個元件都可以去取用(不用擔心會有不一致的問題)。

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
const ThemeContext = React.createContext(themes.light);

公共區域裡面的資料庫就多了一筆themes.light，當元件要取用時先找到公共區域ThemeContext的名稱，加上.Provider將valu傳入，那麼<ThemedButton />就可以使用到themes.light的顏色資料庫。

function App() {
  return (
    <ThemeContext.Provider value={themes.light}>
      <ThemedButton />
    </ThemeContext.Provider>
  );
}
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

這樣的方式就可以讓元件不管隔多少代都可以取用同一份資料，達到多層元件的溝通。