React 中的useReducer是个什么东西

写在前面

若是你想深刻学习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…

写在最后

以上就是本身的总结，有错误之处，还但愿你们予以纠正。