react全家桶最陡峭的redux这部分状态管理，这部分输出了几个比较晦涩的概念，如果没在实际项目应用，很难理解，而且讲真用过vue的同学都会被vue-cli的方便给吸引，官方也出了vuex的实例很容上手，还有ng2的ng-cli也不错，但是react的create-react-app的使用并不是太美，像是redux、flux之类的东西要自己搭建，写法多样，上手起来总是不是太顺手。 当然上面说的可能是我程度不够，之前做公司搭建的一个react的脚手架并不是太顺利，可以说遇到蛮多坑的，照搬了vue的那套手脚架，用起来还是OK的，但就是有些繁琐，这里贴一下项目地址：https://github.com/zkeyword/react-demo。 说起来和dva的故事，怎么说呢，算我见识浅薄吧，当场搭完上面的脚手架之后，看过一部分文档，耐心不够，因为dva又引入了model、service，而model又有namespace、reducers、effects、subscriptions等概念，看了有点发怵，本来redux已经绕晕我了，项目就没用到dva的架构，后面跳槽之后重新了解了dva，发现dva的团队的文档还是蛮细的，让我找到了当初是用vue-cli的那种感觉了，虽然有一些版本更新的诟病，但是最近发布的dva 2.0，今天刚刚试用了一下还是不错的。 目前，正在使用dva1.x开发项目，用起来还是比较顺畅的，由于dva-cli没有支持stylus，我并没有是用dva-cli搭建项目，而是具有普通的webpack搭建的架子：https://github.com/zkeyword/dynamax-react-scaffold-dva，下一步的计划是使用dva-cli提供的自定义webpack配置支持stylus并更新到dva2.0。 接下来讲讲dva的一些技术要点，总体来说react全家桶最绕的地方是redux这部分，redux跟着教程走一波，也不一定能搞懂，还有对于团队的小伙伴，程度是不一样的，要跟上解释起来也是蛮麻烦。而dva则做redux之上封装了一层，我觉得核心部分就是model这块，简化的曲线的效果特别明显。 model由namespace、state、reducers、effects、subscriptions组成：

namespace 标识model，后期可用namespace的名称调用model

state 默认数据

reducers action的集合，唯一能修改state的东西

effects 可以理解为方法的集合体，这里定义的方法可以供components、model等地方使用，只要dispatch一下就可以改变state

subscriptions 这里可以监听路由的变化、键盘事件等

代码的基本流向是：

index.js(入口文件) => router.js => model(绑定)
                               => components => dispatch => effects => reducers => state

其中effects的方法有call、select、put三个参数：

call 是一些异步的操作，如service的ajax、promise操作等

select 拥有调用全局所有model的能力

put 用于触发action，如reducers

以上只是一些我get到的点，若要上手还是参照官方的代码git clone个下来溜溜。 使用dva的话，其实有些不好的就是常用的react生命周期的api，用的少了，这就跟当场用jQuery一样，jQuery用的多了，原生的js很多就写不出来了。不过项目大了，用dva来组织代码结构，还是比较好维护的，由于上手react不久，深度不够，不喜勿喷。