React 中的useReducer是个什么东西

程序铺子
3,667 阅读4分钟

写在前面

如果你想深入学习React，借助它解决自己遇到的各种业务场景，那么你就需要了解useReducer。

结合我自己的学习心得和使用经验，写下这篇博客跟大家分享useReducer最简单的知识点。

什么是useReducer

useReducer是React推出的一个扩展Hook，如下代码所示，它接受 (state, action) ⇒ newSatte的一个reduce，并返回当前的state以及与其配套的dispatch方法，让开发人员能够更好的管理代码中的数据，如果你熟悉Redux，那么你对useReducer的工作原理就非常清楚了。

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

这里简单介绍以上面的几个变量：

  1. initialState：需要我们自己定义，是我们要管理的一个初始变量。可以是一个数字，字符串，数组，对象等。
  2. reducer：是我们自己定义的一个纯函数，它的作用就是通过定义好的逻辑来改变initialState初始变量，为我们的项目服务。
  3. state：reduce里面的逻辑处理数据之后，会返回一个最新的值，就是这个state
  4. dispatch：触发器，reducer中会定义很多条件，具体要使用哪一个条件来改变initialState变量呢，就是要通过触发器来控制。

总结起来一句话：我们使用dispatch来触发reducer纯函数，用reducer纯函数中的逻辑修改initialState，得到一个新的变量，把这个变量赋值给state，最终返回。

从这一点看，useReducer和useState非常相似，如下代码所示，我们是这样使用useState的：

const [userName, setUserName] = useState("Allen")

useState接受一个初始值"Allen"，返回一个最新值userName和修改这个最新值的方法setUserName。从这里可以看出，useState是对useReducer的封装，useReducer是一种更原生的Hook，你能在使用useState的地方都替换成使用useReducer。后面我们会给出useReducer的几种使用场景。

为什么要使用useReducer

如果你是一个刚刚接触React Hooks的程序员，你可能更加倾向于使用useState而不是useReducer，因为useState太好用了，组件中需要管理几个变量，就是用几个useState定义多少变量和方法就可以了，这没有什么问题。但是很多有丰富经验的程序员更加推荐你使用useReducer，理由如下：

1. 在需要管理大量数据的场景中，使用useReducer更加合适

在一些业务场景下使用useReducer更加合适，比如：一个组件中要收集用户很多方面的信息，例如身高体重性别等基本信息，学历专业特长等学校信息，公司职位工龄等单位信息等等。

如果你要为这些信息都一一创建变量来保存，那就太繁琐了。即使你使用一个或几个对象来存储，也还是不够清晰，这个时候使用useReducer就显得很方便，这一点我们在后面的实例中会给出，

2. 使用useReducer更加利于其他程序员理解

大多数程序员对Redux比较熟悉，习惯于使用dispatch触发action，然后获取最新的state。这种情况下，

他来阅读useReducer会跟加得心应手。但是如果让他们去学习和掌握useState，显然主要花费一些时间。

如何使用useReduce管理组件中的状态

下面给出一个简单的例子，来跟大家介绍如何使用Reducer管理组件中的状态。

这是一个计数器，可以自增，自减和重置，如果你有兴趣，可以直接到codesandbox中查看这个例子：codesandbox.io/s/react-use…

1. 首先我们需要定义一个初始的变量

一般情况下这个变量是一个对象，这里的变量只有一个属性amount，表示当前的数量：

const initState = {
    amount: 0
}

2. 然后我们需要定义reducer

reducer就是一个纯函数。这个纯函数接受两个参数，最终返回一个最新的状态值。

这两个参数分别是initstate和action。initstate是要管理的状态值的初始状态，action是一种命令，他告诉reducer要如何管理state状态值。

返回的变量，我们称作是最新的状态值。这里定义的reducer代码如下：

const reducer = (state, action) => {
  switch (action.type) {
    case "add":
      return {
        amount: state.amount + 1
      };
    case "minus":
      return {
        amount: state.amount - 1
      };
    case "reset":
      return {
        amount: 0
      };
    default:
      return {
        amount: 0
      };
  }
};

4. 使用useReducer来定义state和触发reducer的方法

代码如下：

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

5. 使用dispatch触发action，修改状态

在实际使用的时候，我们需要用dispatch触发一个action，reducer根据action的种类进行操作，代码如下：

<button onClick={() => { dispatch({ type: "add" }); }} >Add</button>

<button onClick={() => { dispatch({ type: "minus" });}}>minus</button>

<button onClick={() => { dispatch({ type: "reset" });}}>reset</button>

结合具体的使用示例，介绍如何使用useReducer，

之前看到一篇文章，对useReducer的使用场景做了很详细的描述，这里直接给出列出，有兴趣的小伙伴可以自行阅读：

在 React Hooks 中使用 useReducer 的几种用例：juejin.cn/post/684490…

写在最后

以上就是自己的总结，有错误之处，还希望大家予以纠正。

avatar
文章
阅读
粉丝