一起学react (1) 10分钟 让你dva从入门到精通
前言
如果文章中有错误的地方的话 可以直接加我QQ：469373256
自己针对一些问题做的优化版本 目前刚启动 还不是很成熟
https://github.com/fangkyi03/fastkit-dva.git
麻烦大家加星鼓励一下 谢谢
原有的项目从码云移植到了github
新的地址:https://github.com/fangkyi03/react-demo
本人自己修改后的dva版本 增加了对网络处理的控制
https://github.com/fangkyi03/dvajs
详细的具体说明在github上 觉得好的麻烦加星鼓励一下
技术资料
react + dva + redux + react-router + redux-sage + antd + antd动画
总的来说dva是一个很简单的项目 一步步跟大家来说一下把
效果图
初始化环境配置
因为项目中使用了antd的关系 所以 这边需要做一下设置 才可以正常使用
文件名称是:.roadhogrc
目录结构
初始化dva
初始化部分 非常简单 首先一个个来说明一下
1.const app = dva()
这部分是用来做dva初始化的部分 先给大家看一下完整的接口
在这里 你可以设置全局state 全部error 还有包括router的事件 state的事件 等等
都可以直接统一的在这边进行设置与管理
还有history这个参数是从react-router中来的
相关地址:react-router dva初始化
2.app.use
这个是用来加载插件的 因为我这个项目没用到什么其他的redux第三方中间件 所以这边直接忽略
3.app.model
这个是用来接收你发送的action的
相关链接:model
4.app.router
在这里面 进行你所有页面的初始化路由设置
这里有两种写法
写法1：
写法2:
下面这种是按需加载的 所有 性能会比上面的那种 要高很多 尤其是你的页面比较重的时候
ok初始化部分全部讲完了 现在来看看ui部分
UI代码
这个是我的一个完全简化版 不含里面的内容 因为UI部分 我想搞前端的人 应该都会 所以就来讲点跟dva有关系的
我想 如果没有接触过这种写法的人 肯定会感觉很纳闷吧 这是啥招 不知道在干吗啊 来看看 说明
首先说一下 这个写法的优点跟缺点
优点：
因为这样写的话 就是一个function 所以react在判断的时候 会直接省略生命周期的部分 从而 可以大大的加快加载速度
缺点：
缺点就是 你无法使用this,也没有办法使用生命周期
所以 如果你的页面 必须要使用生命周期的话 还是用class吧
connect
这个其实很好理解
如果说你的ui里面需要用到model里面的数据的话 那么就可以直接用这个 将model里面的元素 当做props的方式 传递进来
如果你只想接管一个app的model的话
connect(({app}) => ({app})
如果你想接管多个 直接在app后面添加即可
至于另外的form.create部分 因为这里使用到了一个antd的表单组件
所以需要用form.create的方式 将里面的内容以props的方式 传递进去
相关文章:antd表单组件
登录
因为我们是一个表单登录页面 所以 当我们点击登录的时候 需要发送一条dispatch给model那边 然后通过他来实现页面的跳转
先来看看如何发送数据
因为使用了antd的关系 所以表单部分 可以说是被无限的弱化了 你现在 不需要关心任何事情 他都会帮你搞定 具体相关的api 可以看上面发的那个链接
来看看消息发送的部分
这里其实 很简单 因为antd已经帮我们做了处理 我们可以在他们提供的表单组件中 进行相关的配置 而所有的数据 他都会通过这个来直接返回过来
所以我们只需要在这边进行一下判断即可 如果产生了错误就直接返回
否则执行dispatch 发送一条action给对应的model那边 然后在那边做出相应的判断
model部分
首先 一般介绍的文章都会写的很详细 但是对于新手来说 有可能会无从下手
所以 我们在接触到我们不熟悉的东西的时候 最好能用自己习惯的一种语言去解释他 这样也方便学习 按功能 我们依次下来
reducers 处理数据
effects 接收数据
subscriptions 监听数据
通过这样的解释是不是稍微能对其有个大概的了解 每个都是按照功能分类的 所以 尽量 不要在不归他管的地方 做其他的事情
还记得 我们刚才发送数据的那个命令吗 我们在来看一下
dispatch 是根据你里面设置的type内容 然后转发到指定的model的 所以你这边 要设置正确以后 在model那边才能接收到你发送的这条action
login就是我们处理接收消息的地方
在这里 又遇见了几个新的单词 put call
其实 不止这几个
一般常用的有put call select take
当然 在这个上面 还有一些基于这些函数 封装的高阶函数
相关文章:github.com/dvajs/dva/blob/master/test/effects-test.js
简单来说一下 这几个函数的大概内容
put 用来发起一条action
call 以异步的方式调用函数
select 从state中获取相关的数据
take 获取发送的数据
当我们使用put发送一条action的时候 与之对于的reducers就会接收到这个消息 然后在里面返回state等数据
这里有一点 reducers中尽量只做state的数据返回 而不要在这里写相关的逻辑
对于路由跳转的部分 我们使用这样来实现
当我们执行这个命令的时候 因为我们的router已经相互绑定起来了 所以他会自动调用router中的数据来进行展示
ok 总体就这么多吧 是不是感觉很简单
我自己个人觉得 毫无难点 入门简直 不要太方便
我相信 只要仔细看完我所有写的 dva的所有功能都将可以掌握
如果有问题的话 可以加我QQ：469373256
