一起学react 10分钟 让你dva从入门到精通

Posted 2020-11-24 sexintercourse

前言

如果文章中有错误的地方的话 可以直接加我QQ：469373256

自己针对一些问题做的优化版本 目前刚启动 还不是很成熟

https://github.com/fangkyi03/fastkit-dva.git

麻烦大家加星鼓励一下 谢谢

原有的项目从码云移植到了github

新的地址:https://github.com/fangkyi03/react-demo

一起学react(2) dva底层源码与案例分析 - 简书

本人自己修改后的dva版本 增加了对网络处理的控制

https://github.com/fangkyi03/dvajs

详细的具体说明在github上 觉得好的麻烦加星鼓励一下

GitHub - fangkyi03/nextjs-antd-dva-template: 最优的nextjs antd dva 服务端解决方案

自己修改的最优ssr nextjs 服务端渲染例子 开箱即用 解决了你可能遇到的所有问题

技术资料

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

 

招聘板块

帮朋友代发

智慧建筑前端

1. 熟练掌握移动端 H5 开发、熟悉主流移动浏览器的技术特点； 

2. 熟练运用 javascript 语言与 html5、CSS3 等技术; 

3. 熟悉模块化、前端编译和构建工具，熟练运用主流的移动端 JS 库和开发框架，并深入理解其设计原理，例如：Zepto、React 等； 

4. 能提供完善的 WebApp 技术方案，了解 native 移动应用开发，有类 react native 开发经验者优先； 

5. 对技术有强烈的进取心，具有良好的沟通能力和团队合作精神、优秀的分析问题和解决问题的能力。   

地址:阿里巴巴总部西溪湿地园区

薪酬16-23    有有意向着加微信15970618232，发简历到微信

作者：fangkyi03
链接：https://www.jianshu.com/p/69f13e9123d9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。