React Context：管理共用狀態的利器

React Context 是 React 框架提供的一種功能，用於在不使用 prop drilling 的情況下，在元件樹中進行資料傳遞。這對於需要在多個層級中共用資料的應用程式，非常有效。透過 Context，我們可以在應用程式的高層定義狀態，並讓深層次的元件也能夠存取到這些資料。

使用 React Context 的基本過程包含三個步驟：創建 Context、提供 Context、消費 Context。首先，我們使用 React.createContext() 創建一個新的 Context。接著，使用 Context.Provider 將資料提供給子樹中的元件。最後，透過 useContext 或 Context.Consumer 來取得資料。

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const sharedState = 'Hello World';

  return (
    <MyContext.Provider value={sharedState}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

Context.Provider 是提供資料的關鍵元件。所有在 Provider 樹下的元件都可以存取這些提供的資料。Provider 接受一個 value 屬性，代表你想要提供的資料。

const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

將 MyComponent 放置在 MyProvider 之下，這樣 MyComponent 就能透過 useContext 存取到 MyProvider 提供的資料。

在 React 中有兩種主要方法可以消費 Context：使用 useContext Hook 或 Context.Consumer 組件。useContext 更直覺也容易搭配 Hooks，較推薦使用。

使用 useContext:

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

使用 Context.Consumer:

<MyContext.Consumer>
  {value => <div>{value}</div>}
</MyContext.Consumer>

在使用 Context 時，若未妥善處理，容易導致不必要的重渲染。這是因為每當 Context.Provider 的 value 發生變化時，所有消費該 Context 的元件都會重新渲染。若要改善，可使用 memo 或 useMemo 來優化性能。

const memoizedValue = useMemo(() => ({ prop1, prop2 }), [prop1, prop2]);

<MyContext.Provider value={memoizedValue}>
  {children}
</MyContext.Provider>

這段程式碼確保只有當 prop1 或 prop2 改變時才會更新 value。

在使用 Context 時，推薦的最佳實踐包括：盡量避免在大型或過於複雜的應用中廣泛使用 Context，這可能會導致維護困難；分離不同邏輯的 Context，例如，將認證資訊、設定、語言轉換等拆分為不同 Context。這樣可提高應用的模組化程度和可維護性。

React Context 通常被與 Redux 相提並論，因為它們都用於狀態管理。然而，兩者有不同的適用場合。Redux 提供了全面且可預測的方式來管理應用的全域狀態，適合大型應用。相對而言，Context 更簡單，適用於較小或中型應用中需要共享的狀態。

在 Function 元件中使用 Context 變得越來越普遍，主要是得益於 useContext Hook 的簡單和靈活。以下是一個簡單的範例，展示如何在 Function 元件中透過 Context 取得共用資料。

const ThemeContext = createContext('light');

const ChildComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
};

const App = () => (
  <ThemeContext.Provider value='dark'>
    <ChildComponent />
  </ThemeContext.Provider>
);

在複雜的應用中，可能需要使用多個 Context 來管理不同類型的狀態。React 支持在一個元件中消費多個 Context。合理組織和使用這些 Context 可以使專案更具組織性。

const AuthContext = createContext();
const ThemeContext = createContext();

const App = () => {
  return (
    <AuthContext.Provider value={authValue}>
      <ThemeContext.Provider value={themeValue}>
        <SomeComponent />
      </ThemeContext.Provider>
    </AuthContext.Provider>
  );
};

合適的使用多個 Context 組成的架構能讓資料流更加清晰。

React Context 提供了一種優雅的方式來管理跨層級共用狀態，避免了繁瑣的 prop 層層傳遞。對於中等規模的應用，或者需要在多個層級中簡單共享狀態的情況下，使用 Context 是非常不錯的選擇。理解如何使用和擴展 Context，對於提升專案架構和開發效率上，有著顯著的幫助。