前言
react@16.8版本的更新带来了强大的hook,useReducer,useContext。楼主对useReducer有很大的兴趣,毕竟过去一直用redux,各种定义和命名非常繁琐。试着用useReducer重构了老项目(老项目用的redux),感觉非常舒服,简洁,轻便。写起来相比起redux真的是方便了很多。
对比
redux的使用方式
使用redux的步骤- 定义reducer
- 引入connect
- 定义mapStateToProps方法,mapDispatchToProps方法(分别用来接收state和dispatch)
这种写法并无些麻烦但如果写起大型项目,频繁地connect,频繁地定义mapStateToProps、mapDispatchToProps还是稍有一些麻烦。有一点必须要知道的是,在mapDispatchToProps中我们还要再定义一个方法,包裹那些需要dispatch的动作。以便给view层发生的一些事件使用(比如button的点击事件)
useReducer的使用方式
使用useReducer的步骤- 定义reducer
- useReducer引入reducer和初始值
从代码中可以看到我们通过useReducer,一句话的功夫就可以将state和dispatch引出,供view层使用。不需要像redux再引入connect,将组件connect起来,定义mapStateToProps,mapDispatchToProps,再供view层使用。
从代码量上看,useReducer简洁了很多很多,更易于编写和阅读。同时也减少了方法的定义、减少了命名的次数
useReducer一定要在函数式组件中使用,否则无效!