『Day 22』React Context資料傳遞機制

前言

在上一篇我們提到了使用 Context 來簡化購物車的狀態管理。不過究竟什麼是 Context？為什麼它能解決狀態傳遞的問題呢？

在實務開發中，經常遇到需要跨多個層級傳遞資料的情況，除了購物車之外，還包括網站的主題設定、使用者的登入狀態等。如果用傳統的 props 一層一層往下傳，程式碼不只顯得冗長，後續的維護也相當費力。今天就讓我們深入了解 Context 這個 React 提供的解決方案。

Context 的核心概念

Context 在 React 中扮演著「跨層級資料傳遞」的角色。你可以把它想像成一個大型的共享資料倉庫，任何在這個倉庫範圍內的元件都可以直接取用裡面的資料，不需要透過中間元件的轉交。

讓我們來看看傳統的 props 傳遞和使用 Context 的差異：

// 傳統的 props 傳遞
function App() {
  return <Layout theme="dark" />;
}

function Layout({ theme }) {
  return <Header theme={theme} />;
}

function Header({ theme }) {
  return <Button theme={theme} />;
}

// 使用 Context 的方式
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Layout />
    </ThemeContext.Provider>
  );
}

function Layout() {
  return <Header />;
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按鈕</button>;
}

使用 Context 的好處很明顯：中間的元件不需要參與資料的傳遞，程式碼更簡潔，邏輯更清晰。

建立和使用 Context

使用 Context 主要分為三個步驟：

1. 建立 Context

import { createContext } from 'react';

// 建立一個新的 Context，並提供預設值
export const ThemeContext = createContext('light');

2. 提供資料（Provider）

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <div className="app">
        <Layout />
      </div>
    </ThemeContext.Provider>
  );
}

3. 使用資料（Consumer）

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>點擊</button>;
}

Context 的使用時機

雖然 Context 很方便，但並不是所有的資料傳遞都適合使用它。以下是我的一些使用建議：

適合使用 Context 的情境：

全域設定：像是主題、語言偏好等
使用者資訊：登入狀態、權限等
共用功能：如 API 請求的統一處理

不適合使用 Context 的情境：

小範圍的資料傳遞：只有少數幾個元件需要共用的資料
頻繁變動的資料：可能導致不必要的重新渲染
可以用 props 簡單解決的情況

總結

Context 是 React 中強大的資料傳遞工具，但要懂得適時使用。在決定是否使用 Context 時，我建議先問自己幾個問題：

這個資料真的需要在很多地方使用嗎？
使用 props 傳遞會造成多少困擾？
這個資料的更新頻率如何？

記住，程式設計中沒有絕對，選擇合適的工具比盲目使用新技術更重要。