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>
  );
}

登录后复制