React 中的 &#useContext&# 和 &#useReducer&# 教學指南：高效率管理全域狀態

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

介紹

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

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

讀完本指南後，您將對：

有深入的了解

1. useContext：在組件之間共用狀態的鉤子。
2. useReducer：用於管理複雜狀態邏輯的鉤子。
3. 結合 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>
  );
}

---

回顧與結論

在本文中，我們結合了 useContext 和 useReducer 來管理 React 應用程式中的全域狀態。我們走過：

1. useContext：在組件樹中提供和使用上下文的鉤子。
2. useReducer：以可預測和集中的方式管理複雜狀態邏輯的鉤子。
3. 將兩者結合：我們一起使用兩個鉤子來管理待辦事項列表，其中包含新增、切換和刪除​​任務的操作。

這種模式具有高度可擴展性，隨著您的應用程式變得越來越複雜，useContext 和 useReducer 可以幫助您維護一個乾淨、可預測且高效的狀態管理解決方案。嘗試這些概念並將其應用到您的專案中，以實現更好的狀態處理！

編碼愉快！ ？

以上是React 中的 &#useContext&# 和 &#useReducer&# 教學指南：高效率管理全域狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！