阅读时间约为：7 分钟。

在 React 中，组件状态的管理是非常重要的。通常情况下，我们可以使用 useState 来管理组件状态。但是，如果状态变得越来越复杂，使用 useState 可能会变得非常繁琐。这时候，我们可以考虑使用 useReducer 来管理状态。

你可能会问，为什么不使用 Redux 呢？确实，Redux 是一款非常优秀、流行的状态管理工具，但是有些场景 Redux 并不是最优解。比如，我们的应用非常小，这时候用 Redux 可能会带来额外的复杂度。再比如要对状态进行频繁的更新，这可能会导致大量的 action 被触发，从而增加了额外的开销和复杂度。因此，针对类似的这种场景，useReducer 可能会更合适。

那么我们该如何正确的应用 useReducer 呢？本文将给你答案。

什么是 useReducer

useReducer 是 React 中一种用于管理组件状态的钩子函数。它的作用是将组件的状态分解为多个值，并提供一种可预测、可控的状态更新方式，从而使得代码更加清晰易懂。useReducer 的定义如下：

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

useReducer 接受两个参数：

  1. reducer：一个接受当前状态和动作（action）的 函数 ，返回 新的状态 。在 reducer 中，可以根据 action 的类型来修改状态。
  2. initialState：状态的初始值。

useReducer 的返回值是一个数组，数组中包含两个元素：

  1. state：当前的状态值。
  2. dispatch：一个用于触发状态更新的函数。当 dispatch 被调用时，会触发 reducer 函数，并传递当前状态和 action 作为参数。

useReducer 的基础知识

下面我们通过一个简单的计数器的例子来说明 useReducer 的基本用法：

import React, { useReducer } from 'react';

// 定义 reducer 函数，用于控制状态的变化
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT': // 当 action 的类型为 'INCREMENT' 时，状态加1
      return state + 1;
    case 'DECREMENT': // 当 action 的类型为 'DECREMENT' 时，状态减1
      return state - 1;
    default: // 默认情况下，返回原来的状态
      return state;
  }
}

function Counter() {
  // 使用 useReducer 钩子函数来管理状态
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      {/* 在组件中渲染状态值 */}
      <p>Count: {count}</p>
      {/* 点击按钮时，使用 dispatch 函数来触发状态更新 */}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

在上面这个例子中，我们定义了一个 Counter 组件，用于管理一个计数器的状态。通过 useReducer 函数，我们将组件的状态分解为 count 值，并提供了一个 reducer 函数来控制它的变化。当用户点击加号或减号按钮时，我们通过 dispatch 函数来触发状态的更新。

当我们使用 useReducer 进行状态管理时，必须要立即其中的两个概念：状态（state）和操作（action）。

  1. 状态（state）：状态是组件中需要被管理的数据。状态可以是数字、字符串、对象等任何类型的数据。
  2. 操作（action）：操作是触发状态更新的行为。它是一个普通的 JavaScript 对象，包含一个 type 属性和可选的 payload 属性。type 属性是必须的，用于指定所触发的操作类型。payload 属性可以包含任何需要传递给 reducer 函数的数据。通常，payload 属性用于指定更新状态所需的数据。

如果你用过 Redux 进行状态管理，不难发现 useReducer 与 Redux 的概念和写法有些类似。在有 Redux 的应用经验的前提下，掌握 useReducer 对你来说应该不难。

与其他状态管理工具的比较

在 React 中，useState、useReducer 和 Redux 都是常用的状态管理工具。它们各自有自己的优缺点，适用于不同的场景。

  1. useState
    useState 是 React 提供的一种基础的状态管理工具。它的使用非常简单，只需要提供初始值即可，而且可以通过 setState 函数来更新状态。
    与 useReducer 相比，useState 的优点在于它更加简单易用，适用于一些简单的状态管理场景。但缺点在于，当状态变得比较复杂时，使用 useState 可能会导致代码冗长、难以维护。
  2. useReducer
    useReducer 是 React 提供的另一种状态管理工具。它通过 reducer 函数来控制状态的变化，从而使得状态更新更加可控、可预测。
    与 useState 相比，useReducer 的优点在于它可以管理更加复杂的状态，并且状态更新更加可控、可预测。缺点在于，相对于 useState 而言，使用 useReducer 需要写更多的代码，对于初学者来说可能会有一定的学习曲线。
  3. Redux
    Redux 提供了一种集中式的状态管理方式。在 Redux 中，所有的状态都存储在一个中央 store 中，通过 action 和 reducer 来控制状态的变化。
    与 useState 和 useReducer 相比，Redux 的优点在于它可以方便地管理跨组件的状态，并且提供了一种可预测、可控的状态更新方式。缺点在于，相对于 useState 和 useReducer 而言，Redux 需要写更多的代码，并且可能会增加一些额外的复杂度。

了解这些工具各自适用的应用场景，对我们选择合适的状态管理工具很有帮助。通过他们各自的优缺点在特定的场景中使用合适的状态管理工具能极大提高我们的开发效率。因此，不要盲目的使用 useReducer。

总结

通过本文的学习，想必你应该了解了 useReducer 的概念和基本用法。在实际项目中应用之前，建议你先自己写几个 demo 来体验一下 useReducer。也可以通过官方文档或其他文章来进一步了解 useReducer 的高级应用。之后，我们也会就 useReducer 的应用写一篇进阶教程，欢迎关注我们我公号「码上花甲」以免错过。

关注领福利

Last modification：August 15, 2024
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏