用dvajs简化react的学习曲线

作者:norion时间:2017年9月12日评论次数:0 条

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不久,深度不够,不喜勿喷。

上一篇: 用python写一个正向代理服务

下一篇:docker学习笔记(待完善)

相关文章

评论

评论已关闭。