解锁React新维度：探索高级状态管理模式——useReducer加useContext

今禾
90 阅读12分钟

📌 一、为什么需要状态管理？

在 React 开发中，状态（state） 是组件的灵魂。它决定了组件的外观、行为和交互。随着项目复杂度的增加，状态管理也变得越来越重要。

常见状态类型：

类型示例
局部状态输入框内容、按钮点击状态
跨组件状态用户登录信息、主题设置、购物车内容
全局状态应用配置、全局错误、用户信息等

传统方式的问题：

  • 使用 useState + props 传递：props drilling（层层传递 props）很麻烦；
  • 多个组件共享状态：维护成本高、容易出错；
  • 状态逻辑复杂：代码臃肿，难以调试。

🔧 二、useReducer：管理复杂状态逻辑的利器

1. 概念：什么是 useReducer？

useReducer 是 React 提供的一个 Hook，用于管理复杂的状态逻辑。它和 Redux 的 reducer 模式类似。

✅ 适合：多个互相关联的值、下一个状态依赖于之前的状态。

2. 基本结构

const [state, dispatch] = useReducer(reducer, initialState);
  • state：当前状态
  • dispatch：发送动作（action）的方法
  • reducer：纯函数，根据 action 返回新的 state

3. Reducer 函数详解

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

🔍 三要素详细解释：

  • State: 当前状态对象，包含所有必要的状态变量。
  • Action: 动作对象，描述发生了什么。通常包含一个 type 字段来标识操作类型，可能还会有 payload 字段来携带额外的数据。
  • Reducer: 纯函数，接收当前状态和动作，返回新的状态。它必须是确定性的，即相同的输入总是产生相同的输出。

🧠 更深层次的理解：

  • 不可变性（Immutability）: 在 React 中，状态应该被视为不可变的。这意味着当你更新状态时，不应该直接修改现有的状态对象，而是创建并返回一个新的状态对象。这样做不仅有助于保持应用的可预测性，还可以使 React 更有效地检测到状态的变化，从而触发必要的重新渲染。

  • 纯函数（Pure Function）: Reducer 必须是一个纯函数，意味着它的输出仅取决于输入参数，没有副作用（如网络请求、DOM 操作）。这使得 Reducer 易于测试和调试。

4. 实例：计数器组件

import React, { useReducer } from 'react';

function Counter() {
  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'inc':
        return { count: state.count + 1 };
      case 'dec':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }, { count: 0 });

  return (
    <div>
      <p>当前计数：{state.count}</p>
      <button onClick={() => dispatch({ type: 'inc' })}>+1</button>
      <button onClick={() => dispatch({ type: 'dec' })}>-1</button>
    </div>
  );
}

🧠 代码解释：

  • useReducer: 接收两个参数：
    • 第一个是 reducer 函数，定义了如何根据不同的 action 更新状态。
    • 第二个是初始状态 { count: 0 }。
  • dispatch: 用来触发状态更新，传入带有 type 的 action 对象。
  • UI 组件: 直接使用状态并在用户交互时通过 dispatch 发送 action 来更新状态。

🧠 底层机制：

当调用 dispatch(action) 时，React 会执行以下步骤：

  1. 调用 Reducer: 将当前状态和传入的 action 传递给 reducer 函数。
  2. 生成新状态: Reducer 根据 action 的 type 和当前状态计算出新的状态。
  3. 状态更新: React 将新的状态存储起来，并触发视图的重新渲染。

5. useReducer 的优势

对比项useStateuseReducer
状态类型基础类型（number, string）复杂对象、多个子值
可维护性简单场景好用复杂逻辑更清晰
可测试性较难更容易测试 reducer
可复用性难容易封装为自定义 Hook

🧭 三、useContext：跨层级通信的高速公路

1. 概念：什么是 useContext？

useContext 是 React 提供的一个 Hook，用于跨层级访问数据，无需手动传递 props。

✅ 适合：主题、用户登录信息、全局状态（如待办事项）

2. 使用步骤

Step 1: 创建 Context

import React from 'react';

const ThemeContext = React.createContext('light'); // 默认值

🧠 解释：

  • React.createContext() 创建一个新的上下文对象。
  • 参数 'light' 是默认值，在没有提供 Provider 或者 Provider 的 value 未定义时使用。

🧠 底层机制：

  • Context 对象: Context 对象本质上是一个 React 组件，它允许你将数据传递给其下的任何组件，而不需要手动逐层传递 props。这在处理跨越多层嵌套的组件间共享数据时非常有用。

Step 2: 使用 Provider 提供值

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

🧠 解释：

  • <ThemeContext.Provider> 包装了需要访问上下文值的组件树。
  • value 属性指定要提供的值，这个值可以被任何嵌套在这个 Provider 内的组件通过 useContext 获取。

🧠 底层机制：

  • Provider: <Context.Provider> 组件接受一个 value prop，并将其作为上下文值传递给所有消费该上下文的组件。这些组件可以直接从上下文中读取这个值，而不需要显式地通过 props 传递。

Step 3: 在子组件中使用 useContext

import React, { useContext } from 'react';

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />;
}

🧠 解释：

  • useContext(ThemeContext) 返回最近的 <Provider> 中提供的值。
  • 这样就避免了通过 props 手动将值从父组件传递到子组件的过程。

🧠 底层机制：

  • Consumer: 当你在某个组件中调用 useContext(Context) 时，React 会向上遍历组件树，直到找到最近的 <Context.Provider>，然后返回它的 value。如果没有找到，则返回 Context 的默认值（如果有的话）。

3. useContext 的底层原理

React 内部维护了一个“上下文栈”，当组件调用 useContext(Context) 时，它会：

  1. 从当前组件开始向上查找；
  2. 找到最近的 <Context.Provider>；
  3. 返回它的 value 值；

🧠 这个过程是静态的，不能动态切换上下文。

🧠 更深层次的理解：

  • 上下文栈: React 内部维护了一个栈结构来追踪所有的上下文提供者。每当遇到一个 <Context.Provider>，它就会将这个提供者的 value 压入栈顶。当组件调用 useContext(Context) 时，React 会从栈顶开始向下查找，直到找到第一个匹配的上下文提供者，并返回其 value。

  • 性能优化: React 通过静态分析来优化上下文的查找过程。如果你在一个组件中多次调用 useContext(Context)，React 不会每次都重新遍历整个上下文栈，而是利用缓存的结果来提高性能。

4. useContext 的优势

场景传统方式使用 useContext
跨层级传值传递 props直接获取值
主题切换麻烦简洁高效
用户登录状态需要全局变量更自然的共享方式

🧩 四、结合实战：构建一个 Todo App

我们将结合 useReducer 和 useContext 构建一个完整的 Todo 应用。

1️⃣ 项目结构

src/
├── App.js
├── TodoContext.js
├── hooks/
│   ├── useTodos.js
│   └── useTodoContext.js
├── reducers/
│   └── todoReducer.js
├── components/
│   ├── AddTodo.js
│   └── TodoList.js

2️⃣ Step 1: 定义 Reducer（todoReducer.js）

export default function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: Date.now(),
          text: action.text,
          done: false,
        },
      ];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.id ? { ...todo, done: !todo.done } : todo
      );
    case 'REMOVE_TODO':
      return state.filter(todo => todo.id !== action.id);
    default:
      return state;
  }
}

🧠 代码解释：

  • case 'ADD_TODO': 添加一个新的任务，使用 Date.now() 生成唯一的 ID。
  • case 'TOGGLE_TODO': 切换任务的完成状态，找到对应的任务并更新其 done 属性。
  • case 'REMOVE_TODO': 删除一个任务，过滤掉 ID 不匹配的任务。
  • 每次操作都返回一个新的状态数组，确保状态的不可变性。

🧠 底层机制：

  • 不可变性: 每次更新状态时，我们都不直接修改原有的状态对象，而是创建一个新的状态对象。例如，在 ADD_TODO 操作中，我们使用扩展运算符 ... 来复制现有的状态数组，并在其末尾添加一个新的任务对象。这种方式不仅有助于保持状态的一致性和可预测性，还能让 React 更加高效地检测到状态的变化，从而触发必要的重新渲染。

3️⃣ Step 2: 创建 Context（TodoContext.js）

import React from 'react';

export const TodoContext = React.createContext();

🧠 说明：

  • 创建了一个空的 Context，用于在组件树中共享状态。
  • 后续会在 Provider 中提供具体的值。

🧠 底层机制：

  • Context 初始化: React.createContext() 创建了一个新的 Context 对象，默认值可以为空或指定一个初始值。这个 Context 对象可以被多个组件共享，形成一个共享的状态环境。

4️⃣ Step 3: 自定义 Hook（useTodos.js）

import { useReducer } from 'react';
import todoReducer from '../reducers/todoReducer';

export function useTodos(initial = []) {
  const [todos, dispatch] = useReducer(todoReducer, initial);

  const addTodo = text => dispatch({ type: 'ADD_TODO', text });
  const toggleTodo = id => dispatch({ type: 'TOGGLE_TODO', id });
  const removeTodo = id => dispatch({ type: 'REMOVE_TODO', id });

  return {
    todos,
    addTodo,
    toggleTodo,
    removeTodo,
  };
}

🧠 说明：

  • useReducer: 用于管理 Todo 列表的状态。
  • dispatch: 触发各种操作。
  • 封装了 addTodo, toggleTodo, removeTodo 方法，简化了状态操作的调用。
  • 最后返回一个包含状态和方法的对象，供组件使用。

🧠 底层机制：

  • 自定义 Hook: useTodos 是一个自定义 Hook，它封装了 useReducer 的逻辑，使得其他组件可以通过调用这个 Hook 来获取和操作 Todo 列表的状态。这种封装方式不仅提高了代码的复用性，还使得组件之间的职责更加明确。

5️⃣ Step 4: 封装 Context Hook（useTodoContext.js）

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

export function useTodoContext() {
  return useContext(TodoContext);
}

🧠 说明：

  • 封装了一个自定义 Hook，简化了组件中对 Context 的调用。
  • 通过 useContext(TodoContext) 获取上下文值，避免每次都要重复写这段代码。

🧠 底层机制：

  • Context Consumer: useContext(TodoContext) 实际上是一个便捷的方式来消费 Context 的值。它相当于在组件内部调用了 <Context.Consumer> 组件，但语法更为简洁。这种方式不仅减少了样板代码，还提高了代码的可读性和维护性。

6️⃣ Step 5: 添加任务组件（AddTodo.js）

import { useState } from 'react';
import { useTodoContext } from '../hooks/useTodoContext';

function AddTodo() {
  const [text, setText] = useState('');
  const { addTodo } = useTodoContext();

  const handleSubmit = e => {
    e.preventDefault();
    if (text.trim()) {
      addTodo(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="输入任务内容"
      />
      <button type="submit">添加</button>
    </form>
  );
}

🧠 说明：

  • 使用 useState 管理输入框内容。
  • 表单提交时调用 addTodo 添加任务。
  • 提交后清空输入框内容，以便用户可以继续添加新任务。

🧠 底层机制：

  • 事件处理: handleSubmit 函数负责处理表单提交事件。当用户点击提交按钮时，它会阻止默认的表单提交行为，并调用 addTodo 函数来添加新的任务。之后，它还会清空输入框的内容，以便用户可以继续输入新的任务。

7️⃣ Step 6: 展示任务列表（TodoList.js）

import { useTodoContext } from '../hooks/useTodoContext';

function TodoList() {
  const { todos, toggleTodo, removeTodo } = useTodoContext();

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <span
            onClick={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.done ? 'line-through' : 'none' }}
          >
            {todo.text}
          </span>
          <button onClick={() => removeTodo(todo.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

🧠 说明：

  • 使用 useTodoContext 获取所有任务和操作方法。
  • 遍历 todos 渲染每个任务。
  • 点击任务文字切换完成状态，通过改变 todo.done 属性实现。
  • 点击删除按钮删除任务，通过 removeTodo 方法实现。

🧠 底层机制：

  • 列表渲染: todos.map() 方法用于遍历 todos 数组，并为每个任务生成一个 <li> 元素。每个任务都有一个唯一的 key 属性，这对于 React 来说非常重要，因为它可以帮助 React 更加高效地识别和更新 DOM 元素。

8️⃣ Step 7: 主组件（App.js）

import React from 'react';
import { TodoContext } from './TodoContext';
import { useTodos } from './hooks/useTodos';
import AddTodo from './components/AddTodo';
import TodoList from './components/TodoList';

function App() {
  const todosHook = useTodos([]);

  return (
    <TodoContext.Provider value={todosHook}>
      <h1>React Todo 应用</h1>
      <AddTodo />
      <TodoList />
    </TodoContext.Provider>
  );
}

export default App;

🧠 说明：

  • 使用 useTodos([]) 初始化空的 Todo 列表。
  • 通过 TodoContext.Provider 提供状态和方法。
  • 子组件通过 useTodoContext() 获取状态和方法。
  • 整个应用的状态实现了全局共享和管理。

🧠 底层机制：

Provider:

当你在 <TodoContext.Provider value={todosHook}> 中包裹了你的组件树时，你实际上是在告诉 React，“这个上下文提供者将为所有后代组件提供一个特定的值”。在这个例子中，value={todosHook} 是由 useTodos([]) 返回的对象，它包含了所有的状态（例如 todos 列表）以及可以改变这些状态的方法（例如 addTodo, toggleTodo, removeTodo）。

  1. 状态共享：通过这种方式，你可以轻松地在任何嵌套层级的子组件中访问这些状态和方法，而无需手动通过 props 逐层传递。这大大简化了跨层级组件之间的数据通信问题。

  2. 性能考虑：值得注意的是，React 会根据 value 的引用是否发生变化来决定是否需要重新渲染子组件。如果 value 每次渲染都是一个新的对象（即使内容相同），可能会导致不必要的重新渲染。因此，在实际开发中，可能需要使用 useMemo 或 useCallback 来优化性能，确保只有当真正有变化时才更新 value。

  3. 嵌套 Provider：如果你在一个已经存在 Provider 的组件内部再定义一个新的 Provider 并且它们提供相同的 Context 类型，那么内部的 Provider 将覆盖外部的 Provider。这意味着，最近的 Provider 提供的值会被使用。

  4. 默认值：每个 Context 对象都有一个默认值，可以在创建 Context 时指定。如果某个组件试图消费一个没有被任何 Provider 提供的 Context 值，那么就会使用这个默认值。这对于调试或测试非常有用。

  5. Consumer vs useContext Hook：除了使用 useContext Hook 外，你还可以使用 <Context.Consumer> 组件来消费上下文值。虽然两者都可以达到同样的效果，但是 useContext 更加简洁易用，特别是在函数式组件中。

🧠 五、难点解析

1. 为什么用 useReducer 而不是 useState？

  • 简单状态：对于单一或少量相关的状态变量，useState 足够。
  • 复杂状态：当状态涉及多个互相关联的值时，useReducer 能更好地组织和管理这些状态变化。
  • 可维护性：useReducer 使得状态逻辑更加集中，易于理解、调试和测试。

2. useContext 是怎么工作的？

  • 内部机制：React 内部维护了一个“上下文栈”。当你在组件中调用 useContext(Context) 时，React 会从当前组件开始向上查找，直到找到最近的 <Context.Provider>，然后返回它的 value 值。
  • 避免 prop drilling：使组件间的数据流动更加直观，减少了不必要的 props 传递。

3. 为什么自定义 Hooks？

  • 代码复用：将常用的功能封装为自定义 Hook，提高代码的复用性。
  • 关注点分离：让 UI 组件专注于视图呈现，将状态管理逻辑移至自定义 Hook 中。
  • 测试友好：自定义 Hooks 更容易进行单元测试，因为它们通常是独立的函数。

📌 六、总结

技术作用优势
useReducer管理复杂状态逻辑更清晰、更易维护
useContext跨层级传递数据避免 props drilling
自定义 Hook封装状态逻辑提高复用性、组件更简洁

🎉 Happy Coding！

如果你喜欢这篇文章，别忘了点赞、收藏、分享给更多小伙伴哦！如果你还有疑问，欢迎在评论区留言，我会尽快回复你！

avatar
文章
阅读
粉丝