React 中的 &#useContext&# 和 &#useReducer&# 教學指南：高效率管理全域狀態-js教程-PHP中文網

Tutorial Guide to

React 中 useContext 和 useReducer 綜合指南：高效率管理全域狀態

介紹

在 React 中，管理狀態對於建立動態和互動式應用程式至關重要。雖然 useState 和 useReducer 非常適合處理本機元件狀態，但是當您需要跨多個元件管理全域狀態時會發生什麼？輸入 useContext 和 useReducer — 兩個鉤子可以一起使用以在全域層級有效地處理狀態管理。

在本文中，我們將探索如何結合 useContext 和 useReducer 為您的 React 應用程式建立一個強大的狀態管理系統。我們將介紹這兩個鉤子的基礎知識，然後指導您建立一個簡單的應用程序，以演示如何一起使用它們來管理全局狀態。

讀完本指南後，您將對：

有深入的了解

useContext：在組件之間共用狀態的鉤子。
useReducer：用於管理複雜狀態邏輯的鉤子。
結合 useContext 和 useReducer：如何將兩個鉤子一起使用以獲得可擴展的全域狀態解決方案。

讓我們開始吧！

理解 useContext

什麼是useContext？

useContext 是一個 React hook，它允許您在元件樹中共享狀態（或任何其他值），而無需在每個層級手動傳遞 props。當您需要一次向許多元件提供全局資料時，它非常有用。

useContext 的語法是：

const value = useContext(MyContext);

登入後複製

其中 MyContext 是由 React.createContext() 建立的上下文物件。

何時使用 useContext？

共用全域狀態或設定設定（例如主題、驗證）。
當透過多層巢狀元件傳遞 prop 時會變得很麻煩。

理解 useReducer

什麼是 useReducer？

useReducer 是一個 React hook，用於管理涉及複雜邏輯或狀態依賴於先前狀態的狀態。當你的狀態更新需要基於動作，而狀態變化有多種類型時，它通常被用作 useState 的替代方案。

useReducer 的語法是：

const value = useContext(MyContext);

登入後複製

reducer：根據目前狀態和操作傳回新狀態的函數。
initialState：reducer 的初始狀態。
dispatch：用於向reducer發送action以更新狀態的函數。

結合 useContext 和 useReducer

當您組合 useContext 和 useReducer 時，您可以在應用程式中共用複雜的狀態，同時集中狀態轉換的邏輯。當管理需要從應用程式中的任何元件存取的全域狀態時，這特別有用。

為什麼要結合它們？

集中狀態：useContext 提供狀態的全域範圍，useReducer 提供結構化的方式來管理複雜的狀態變更。
可預測的更新：useReducer 允許您使用操作和化簡器可預測地管理狀態轉換，而 useContext 確保您的狀態可用於所有元件。
可擴充性：這種組合可以更輕鬆地擴展需要跨多個元件管理狀態的應用程式。

範例項目：全球待辦事項列表

讓我們建立一個簡單的待辦事項清單應用程序，在其中使用 useContext 和 useReducer 管理全域狀態。該應用程式將支援新增、切換和刪除任務。

第1步：建立Context和Reducer

我們將首先建立一個上下文來保存我們的全域狀態和一個減速器來管理操作。

const [state, dispatch] = useReducer(reducer, initialState);

登入後複製

解釋

todoReducer：管理待辦事項清單狀態，包括新增、切換和刪除任務。
TodoContext：為待辦事項清單狀態提供全域上下文。
TodoProvider：這是一個包裝元件，為它的所有子元件提供上下文和 useReducer 鉤子。

第 2 步：建立待辦事項清單元件

現在，我們將建立一個元件，用於顯示待辦事項清單並提供新增、刪除和切換任務的功能。

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

// Initial State
const initialState = [];

// Reducer Function
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE':
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'REMOVE':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
}

// Create Context
const TodoContext = createContext();

// Provide Context to App
export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

登入後複製