react16.8版本更新中的useReducer想比起redux到底好在哪呢?

1,551 阅读1分钟

前言

react@16.8版本的更新带来了强大的hook,useReducer,useContext。楼主对useReducer有很大的兴趣,毕竟过去一直用redux,各种定义和命名非常繁琐。试着用useReducer重构了老项目(老项目用的redux),感觉非常舒服,简洁,轻便。写起来相比起redux真的是方便了很多。

对比

redux的使用方式

使用redux的步骤

  1. 定义reducer
  2. 引入connect
  3. 定义mapStateToProps方法,mapDispatchToProps方法(分别用来接收state和dispatch)

这种写法并无些麻烦但如果写起大型项目,频繁地connect,频繁地定义mapStateToProps、mapDispatchToProps还是稍有一些麻烦。有一点必须要知道的是,在mapDispatchToProps中我们还要再定义一个方法,包裹那些需要dispatch的动作。以便给view层发生的一些事件使用(比如button的点击事件)

useReducer的使用方式

使用useReducer的步骤

  1. 定义reducer
  2. useReducer引入reducer和初始值

从代码中可以看到我们通过useReducer,一句话的功夫就可以将state和dispatch引出,供view层使用。不需要像redux再引入connect,将组件connect起来,定义mapStateToProps,mapDispatchToProps,再供view层使用。

从代码量上看,useReducer简洁了很多很多,更易于编写和阅读。同时也减少了方法的定义、减少了命名的次数

useReducer一定要在函数式组件中使用,否则无效!