[react 三篇杂乱但笔记齐全-第三篇] Hook之重生我要学习useReducer

谢谢读者能够认真看到第三篇，码字不易，请给个关注！上正题

嘿嘿，我在第二篇叫读者先去看下redux的一些基础知识点，相必大家发现了，Context和redux里面的store很像！

那么接下来的useReducer，就和redux里的reducer差不多啦。

为什么需要useReducer

其实，useReducer和Redux的reducer差不多

它是为了解决在某个组件内部使用了const[xxx，setXxx] = useState()，且组件为了修改数据用了封装过的许多方法，这些方法最终都用setXxx来修改数据

这样子的话，不利于我们维护，且代码量堆起来很难受

因此，reactHook就提供了一套解决方案，并且命名为useReducer。

如何使用useReducer？

这个Hook给我们提供了state和dispatch方法，和Redux的store提供的方法一样

使用Reducer

① const [state,useDispatch()]= useReducer(()=>{},initialValue,init)

第一参数是用来监听action，第二个参数是用来给予初始值，第三个init 先不管

② 用dispatch()并给予一个对象{}，对象里面有个type属性，为了让reducer函数选择对应的代码来执行

前辈们把这个对象叫做action(PS：反正是个对象啦，管他叫什么)

③ 在第一个参数的函数里面写响应若干action类型的代码

一般用switch写，用if-else写也可以，只是比较麻烦

 //举个例子
  const [state,useDispatch()]= useReducer((state,action)=>{
      switch(action.type){
          case add:{
              return state+1
          };
          case reduce:{
              return state-1
          }
          default: return ;
      }
  },1)

注意 性能

如果把useReducer写在函数组件内部的话，每次渲染后，useReducer都会执行，而它的第一个参数是匿名的箭头函数，它会一直被重复的创建，第二个参数是修改的值传进去，不影响。

为了解决这个问题，那么就把定义放到函数组件外部即可

---

【后记】谢谢读者看完这篇文章，那么《react 三篇》系列就到这里就结束了！

读者学完这两个Hook，然后以后再去深入学习redux，就会发现得心应手啦

最后，喜欢我的请点个关注