useReducer：React Hooks

React 中的 useReducer：通过两个迷你项目简化状态管理

介绍

状态管理是在 React 中构建动态和交互式应用程序的关键部分。虽然 useState 足以管理简单状态，但随着应用程序的状态变得越来越复杂，useReducer 提供了一种更强大、可预测的方法来处理它。受 Redux 的减速器模式的启发，useReducer 允许您定义状态转换应如何发生以响应特定操作，使其成为具有多个复杂状态更新的场景的理想选择。

在本文中，我们将：

1. 详细解释 useReducer、其语法以及何时使用它。
2. 实施两个小项目：
   • 具有多个操作的计数器：超越基本增量/减量的示例，展示 useReducer 如何处理多个操作类型。
   • 具有复杂状态转换的待办事项列表：一款突出 useReducer 管理复杂状态对象能力的待办事项应用。

让我们深入了解 useReducer 如何简化 React 中的状态管理！

---

理解 useReducer

什么是 useReducer？

useReducer 是一个 React hook，专为 useState 不足的情况而设计。您不是直接更新状态，而是指定一个减速器函数，该函数根据当前状态和操作计算下一个状态。这种声明式方法使状态转换保持可预测，并允许您以集中的方式管理更复杂的状态逻辑。

useReducer 的语法

以下是语法细分：

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

• reducer：定义如何根据操作更新状态的函数。它需要两个参数：

  • state：当前状态。
  • action：包含有关操作信息的对象，通常包括类型和可选的有效负载。

• initialState：状态的起始值。

示例：使用 useReducer 的基本计数器

让我们使用 useReducer 创建一个简单的计数器来查看实际语法。

import React, { useReducer } from 'react';

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

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

守则解释

1. Reducer 函数：该函数定义如何处理动作。根据操作类型（递增或递减），reducer 函数返回一个新的状态对象。
2. 调度操作：调度将一个操作发送到reducer，reducer对其进行处理并相应地更新状态。

---

何时使用 useReducer

useReducer 在以下情况下特别有用：

• 状态逻辑复杂或涉及多个子值。
• 下一个状态取决于前一个状态。
• 多个组件需要访问reducer管理的状态（可以将useReducer和useContext结合起来使用全局状态）。

---

迷你项目1：多个动作的计数器

在这个项目中，我们将创建一个增强的计数器，允许多种操作（递增、递减、重置），以了解 useReducer 如何处理更广泛的操作。

步骤一：定义Reducer函数

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

第2步：创建计数器组件

import React, { useReducer } from 'react';

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

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

除了递增和递减之外，此增强型计数器现在还支持重置功能。该项目展示了 useReducer 在管理状态更新操作方面的灵活性。

---

迷你项目 2：构建具有复杂状态转换的待办事项列表

待办事项列表应用程序强调了 useReducer 如何非常适合管理具有多个转换的复杂状态对象，例如添加、删除和切换任务。

步骤一：定义Reducer

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error(`Unknown action: ${action.type}`);
    }
}

第 2 步：创建待办事项列表组件

从 'react' 导入 React, { useReducer, useState };

函数待办事项列表（）{
    const [todos, 调度] = useReducer(todoReducer, []);
    const [任务，setTask] = useState('');

    const handleAdd = () =>; {
        if (task.trim()) {
            调度（{ 类型：'添加'，有效负载：任务 }）；
            设置任务(''); // 清空输入框
        }
    };

    返回 （
        <div>
            <h2 id="待办事项列表">待办事项列表</h2>
            ; setTask(e.target.value)}
                placeholder="输入新任务"
            >>
            <button onclick="{handleAdd}">添加任务</button>

            <ul>
                {todos.map(todo => (
                    <li key="{todo.id}">



<h3>
  
  
  待办事项列表代码说明
</h3>

<ol>
<li>
<p><strong>行动</strong>：</p>

<ul>
<li>
<strong>添加</strong>：将新任务添加到列表中，并使用唯一 ID 并将已完成状态设置为 false。</li>
<li>
<strong>删除</strong>：根据ID过滤掉任务来删除它。</li>
<li>
<strong>切换</strong>：通过切换已完成状态将任务标记为已完成或未完成。</li>
</ul>
</li>
<li><p><strong>将 useReducer 与动态数据结合使用</strong>：此示例展示了 useReducer 如何处理对象数组中复杂的嵌套状态更新，使其非常适合管理具有多个属性的项目。</p></li>
</ol>


<hr>

<h2>
  
  
  结论
</h2>

<p>在本文中，您学习了如何有效地使用 useReducer 在 React 应用程序中进行更复杂的状态管理。通过我们的项目：</p>
<ol>
<li>
<strong>增强型计数器</strong>演示了 useReducer 如何简化多个基于操作的状态更新。</li>
<li>
<strong>待办事项列表</strong>说明了如何使用 useReducer 管理复杂的状态对象，例如任务数组。</li>
</ol>

<p>使用 useReducer，您可以为需要强大状态管理的应用程序编写更干净、更可预测且可维护的代码。尝试这些项目，下次在 React 应用程序中遇到复杂的状态逻辑时，请考虑使用Reducer！</p>


          </li>
</ul>
</div>

            
        

以上是useReducer：React Hooks的详细内容。更多信息请关注PHP中文网其他相关文章！