進一步理解 React Context 與 Hooks 結合

React Context 提供了一種方式，讓我們能將狀態與資料傳遞給整個元件樹，而不需要透過層層的 props 傳遞。這在開發大型應用程式時特別有用。例如，我們可以使用 React.createContext() 來建立 Context。

import React from 'react';

const MyContext = React.createContext();

透過這個 Context，我們可以在元件樹中任意位置使用 Provider 提供資料，或使用 Consumer 取得資料。

在 React 中，Context.Provider 是用來提供狀態的一個核心部分。Provider 接受一個 value 屬性，通過這個屬性，我們可以將任何狀態或方法傳遞下去。

<MyContext.Provider value={someValue}>
  <MyComponent />
</MyContext.Provider>

而在應用中，我們通常會將這樣的 Provider 包裹在應用的根元件上，以便讓整個元件樹都能存取到這份狀態。

useContext 是一個 React Hook，允許我們更容易地在函數元件中取用 Context 的值。這使得管理狀態更為直觀和簡單。

import { useContext } from 'react';
import MyContext from './MyContext';

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

這段程式碼展示了如何使用 useContext 取得 Context 的值，使得狀態管理更加便利。

讓我們來看看如何在實際應用中使用 Context 和 useContext。假設我們要建立一個用戶的登入狀態。

const AuthContext = React.createContext();

function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const toggleAuth = () => {
    setIsAuthenticated(prevAuth => !prevAuth);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, toggleAuth }}>
      {children}
    </AuthContext.Provider>
  );
}

使用這樣的 AuthProvider，我們就能讓應用中的任何地方存取用戶的登入狀態。

在有 AuthContext 和 AuthProvider 的情況下，任何一個子元件都可以利用 useContext Hook 來存取這個上下文的資料。

import { useContext } from 'react';
import AuthContext from './AuthContext';

function LoginButton() {
  const { isAuthenticated, toggleAuth } = useContext(AuthContext);

  return (
    <button onClick={toggleAuth}>
      {isAuthenticated ? '登出' : '登入'}
    </button>
  );
}

這樣，我們就能夠透過 useContext 自如地取得和控制共用狀態。

儘管 Context 是強大的工具，但我們需要注意避免不必要的 re-render。為了優化效能，通常會將狀態和行為進行分隔。

const AuthStateContext = React.createContext();
const AuthDispatchContext = React.createContext();

function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  return (
    <AuthStateContext.Provider value={isAuthenticated}>
      <AuthDispatchContext.Provider value={setIsAuthenticated}>
        {children}
      </AuthDispatchContext.Provider>
    </AuthStateContext.Provider>
  );
}

這樣的設計模式能夠有效避免因為狀態更新而造成的多餘 re-render。

在某些複雜的應用中，我們可以考慮使用 useReducer 來替代 useState，以處理更複雜的 state 邏輯。

const initialState = { isAuthenticated: false };

function authReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, isAuthenticated: true };
    case 'LOGOUT':
      return { ...state, isAuthenticated: false };
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, initialState);

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

使用 useReducer，不但讓狀態管理更為清晰，而且讓我們的應用更具擴展性。

現在，我們來實作一個完整的用戶認證案例，結合以上所有技巧。

const AuthContext = React.createContext();

function AuthProvider({ children }) {
  const [isAuthenticated, setAuth] = useState(false);
  const login = () => setAuth(true);
  const logout = () => setAuth(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function App() {
  return (
    <AuthProvider>
      <NavBar />
      <MainContent />
    </AuthProvider>
  );
}

function NavBar() {
  const { isAuthenticated, login, logout } = useContext(AuthContext);

  return (
    <nav>
      <span>{isAuthenticated ? '歡迎, 用戶!' : '請登入'}</span>
      <button onClick={isAuthenticated ? logout : login}>
        {isAuthenticated ? '登出' : '登入'}
      </button>
    </nav>
  );
}

這樣的完整範例展示了如何有效地結合 React Context 和相關 Hooks 來進行狀態管理，確保應用程式的高效運行。

在實際應用開發中，Context 和 Hooks 的使用模式應當經常進行測試與驗證，以確保所實現的功能符合需求。依據不同的應用規模和需求，可能需要根據具體場景調整 Provider 的實現方式。

在複雜度較高的應用中，分割 Context 的關鍵在於查看狀態的細粒度，避免巨大的單一 Context 帶來的性能問題，保持彈性和性能的平衡是工程師們需要不斷追求的目標。

同時，React Concurrent Mode將成為未來處理 Context 背景性能問題的一大亮點，我們應該持續追蹤該技術的演進。

React Context 搭配 Hooks，特別是 useContext 和 useReducer，提供了一個強大而靈活的狀態管理策略，尤其在複雜應用中更是不可或缺。在未來，React 團隊將持續改進這些工具，以幫助開發者更高效、更清晰地開發應用。

藉由這篇文章，我們了解了如何在 React 應用中有效結合使用 Context 與 Hooks，這不僅提升了應用的維護性，還提供了更優雅的狀態管理方案。希望大家在閱讀和實作過程中，能夠更自信地應用這些技術於實際工作中。