谢谢读者能够认真看到第三篇,码字不易,请给个关注!上正题
嘿嘿,我在第二篇叫读者先去看下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,就会发现得心应手啦
最后,喜欢我的请点个关注