ReactJS React+Redux+Router+antDesign通用高效率开发模板，夜间模式为例

Posted 2020-09-04 RETHINK

工作比较忙，一直没有时间总结下最近学习的一些东西，为了方便前端开发，我使用React+Redux+Router+antDesign总结了一个通用的模板，这个技术栈在前端开发者中是非常常见的。

 

总的来说，我这个工程十分便捷，对于初学者来说，可能包含到以下的一些知识点：

一、React-Router的使用

Router是为了方便管理组件的路径，它使用比较简单，一般定义如下就行，需要注意的是，react-router的版本有1.0-3.0，各个版本对应的API大致相似，但也有不同，我使用的是2.X的，API文档如下：

https://github.com/ReactTraining/react-router/blob/v2.8.1/docs/API.md

 

二、Redux和React-Redux的使用

我最初学的时候，看了网上很多Redux教程，简直是乱七八糟。为什么？不是那些人太傻比了（但也有一定的原因），而是Redux的版本发展史真的比较长。加上后来出来的React-Redux，所以各种各样的教程都有。

我这里使用的是Redux 3.5和React-Redux 4.4。这个就不放API文档了，我觉得我的demo里面写的非常清晰了。

下面以最简单的“人话”来说明下Redux的核心工作原理。

使用Redux的原因很简单，为了统一管理state。比如我的demo里的app夜间模式，可能这个参数多个component中都需要用到，所以类似这种我们必须弄成全局的。

而众所周知，React是一个通过state来render界面的框架，这就遇到一个问题，比如我要设置夜间模式，我修改普通的全局参数，并不能在修改后触发重新render，所以我们需要引入一个全局state。而Redux就是这样一个可以管理全局state的框架。

它的组成分为：

（1）store：存储全局state的对象

（2）action: 计算新state的函数（如点击开启夜间模式，darkMode参数变为true），并交给reducer

（3）reducer：根据action拿来的新参数，生成新的全局state

你肯定会说，真他妈简单。简单那就对了。网上乱七八糟的东西太多，希望我这几句话就让你明白其中的道理。

 

那具体如何使用Redux？

看demo就知道了，这里需要注意几点：

（1）在某个component内使用connet函数获取全局state和action中的部分，各取所需

（2）使用redux-thunk，可以进行action的同步/异步操作，因为我demo中默认使用thunk，反正异步是经常会出现的，比如我们更新用户信息，可能请求服务器需要几秒后新的用户信息才会返回，所以这个action的dispatch需要几秒后异步去触发，而默认是不支持的。

（3）存储并在app启动时初始化，我的demo中的设置夜间模式，关闭网页重新打开依旧会维持，就是我在action触发的时候做了缓存，初始化store的时候，又先从缓存取再根据这些内容，初始化store的结果。

 

三、antDesign的使用

demo中演示了antDesign和antDesign-mobile的两种加载（需要修改.babel）。antDesign是一款自定义component库，类似的还有amazeui,materialUI等等。antDesign-mobile就不说了，懒得评价了，那高清模式的兼容性，就像读书的时候交课堂作业一样。蚂蚁金服作为大厂，我觉得这样唐突的去发布这么一个东西实在是不合适。

antDesign相对来说成熟一点，在使用上可能需要配置一些babel等东西，这些东西，配熟练了，也就懂了。

 

四、webpack-dev-server和webpack的配置

webpack配置，总的来说有几块：

（1）webpack-dev-server是我推荐的一个热更新的调试组件，可以根据配置好的webpack来直接hot reload，不需要额外配其他参数。

（2）css-loadder：cssloader主要为了支持一些自定义的css写法：比如postcss,less等，demo中使用postcss去书写css，相对来说这种树形结构的css是我比较喜欢的。

 

（3）babel：babel是为了支持不同版本的JS语言，转换成浏览器能运行的JS。因为前端JS的版本太过零零碎碎，有时候为了支持一个小的功能，就给babel加一个小插件，以至于babel有各种乱七八糟的插件。但这种碎片化，也是JS这们开源语言能够热门、发展起来的原因。

 

demo地址：https://github.com/rayshen/reactjs-universal-project