react 进阶必学 hook （五）：额外的hook

系列文章传送门：

react 进阶必学 hook （一）：useState 来一碗大碗宽面

react 进阶必学 hook （二）：useEffect 专治不吃宽面

react 进阶必学 hook （三）：useContext 面馆分店开张了

react 进阶必学 hook （四）：自定义hook

react 进阶必学 hook （五）：额外的hook

useReducer使用

围绕state，如果存在多个功能操作改state进行状态的更改，且更改状态时用得方法彼此独立，那么使用useState就会比较麻烦，且逻辑容易写的比较分散不方便管理；这时我们可以使用useReducer代替useState管理状态。

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

用过redux的应该很熟悉这种用法，对于state状态这里提供一个触发器dispatch方法，reducer是一个用来匹配状态的更改方法，下面是官网提供的计数器的例子中的reducer：

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

ps：了解过函数式编程的模式匹配，这应该就是用到了模式匹配。

reducer函数通过action来判断匹配更改状态的方法

const initialSt