一起学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上 觉得好的麻烦加星鼓励一下
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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
一起学react (1) 10分钟 让你dva从入门到精通的更多相关文章
- 10分钟go crawler colly从入门到精通
Introduction 本文对colly如何使用,整个代码架构设计,以及一些使用实例的收集. Colly是Go语言开发的Crawler Framework,并不是一个完整的产品,Colly提供了类似 ...
- C# 10分钟完成百度人脸识别——入门篇
嗨咯,小编在此祝大家新年快乐财多多! 今天我们来盘一盘人脸注册.人脸识别等相关操作,这是一个简单入门教程. 话不多说,我们进入主题: 完成人脸识别所需的步骤: 注册百度账号api,创建自己的应用: 创 ...
- C# 10分钟完成百度图片提取文字(文字识别)——入门篇
现在图片文字识别已经很成熟了,比如qq长按图片,点击图片识别就可以识别图片的文字,将不认识的.文字数量大的.或者不能赋值的值进行二次可复制功能. 我们现在就基于百度Ai开放平台进行个人文字识别,dem ...
- C# 10分钟完成百度语音技术(语音识别与合成)——入门篇
我们已经讲了人脸识别(入门+进阶).图片识别(入门).下面是链接: C# 10分钟完成百度人脸识别——入门篇 C# 30分钟完成百度人脸识别——进阶篇(文末附源码) C# 10分钟完成百度图片提取文字 ...
- C# 10分钟完成百度翻译(机器翻译)——入门篇
我们之前基于百度ai开发平台实现了人脸识别 [1].文字识别 [2].语音识别 [3] 与合成的入门和进阶,今天我们来实现百度翻译的实现. 随着"一带一路"政策的开展,各种项目迎接 ...
- 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange
如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...
- Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库
前言 在 .Net Core 2.2中 Microsoft.AspNetCore.App 默认内置了EntityFramework Core 包,所以在使用过程中,我们无需再从 NuGet 仓 ...
- emacs最简单入门,只要10分钟
macs最简单入门,只要10分钟 windwiny @2013 无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...
随机推荐
- SecureCRT 破解安装详细教程
SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序 跟xshell类似. 一.下载文件软件包和破解文件(64版本),我已经放在百度云,链接:https://pan.baidu.c ...
- [MySQL] mysql中bitmap的简单运用
bitmap就是在一个二进制的数据中,每一个位代表一定的含义,这样最终只需要存一个整型数据,就可以解释出多个含义.业务中有一个字段专门用来存储用户对某些功能的开启和关闭,如果是传统的思维,肯定是建一个 ...
- Unity3D VidoePlayer 加载StreamingAssets下视频
using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;usi ...
- pytest系列(四)- pytest+allure+jenkins - 持续集成平台生成allure报告
pytest是什么 pytest是python的一款测试框架,拥有unittest的功能并比它更丰富. allure是什么 有非常多的优秀的测试框架,但却是有非常少优秀的报告工具可以展示非常清楚的用例 ...
- C++ std::forward_list 基本用法
#include <iostream> #include <string> #include <forward_list> using namespace std; ...
- C语言程序设计100例之(22):插入排序
例22 插入排序 问题描述 排序是计算机程序设计中的一种重要操作,它的功能是将一个数据元素或记录的任意序列,重新排列成一个以关键字递增(或递减)排列的有序序列. 排序的方法有很多,简单插入排序就是一 ...
- Hive 报错 Error while compiling statement: FAILED: ParseException line 1:0 character '' not supported here (state=42000,code=40000)
Hive报错 Error while compiling statement: FAILED: ParseException line 1:0 character '' not supported h ...
- Jenkinsfile构建docker镜像
pipeline { agent any stages { stage('preparation') { steps { echo "workspace: ${WORKSPACE}" ...
- read write方式打开PHYSICAL STANDBY,闪回和还原测试
以下大部分都在STANDBY执行,主库执行(两次)的会提示 [STANDBY read write方式打开测试]检查standby状态SQL> SELECT NAME,DATABASE_ROLE ...
- TypeScript 学习笔记(四)
函数: 1.函数是一组一起执行一个任务的语句 2.我们可以把一段可复用的代码放到一起组成函数,从而提高效率 3.函数声明(通过关键字 function 来声明)告诉编译器函数的名称.返回类型和参数 4 ...