React框架之对Dva和Umi的简单理解

简述Dva,Umi和路由的理解

在这里插入图片描述
dva中讲到约定式路由是如果没有路由配置文件,即按照src/page文件夹下的文件目录结构来生成路由

Dva基本流程与文件目录规划

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhWeEBDk-1599101927447)(en-resource://database/1125:1)]

Model

公共数据React的Store StateDva中的Model
私有数据==state

Reducer、Effect

公共数据分为同步数据和异步数据
同步数据,不需要依赖别人 (Reducer)
异步数据就是需要等待的数据,比如从后端接收来的数据(Effect)

异步的数据不能直接调回给页面,要先给(put)同步,再给(connect)页面。
同步数据连接页面的行为叫做(connect)

页面给model数据的行为叫做dispatch(分派)

当然页面

Dva订阅 (Subcription)

如果一些页面常规的操作,然后用订阅去操作。

service(服务)

model中可以分离出来的是异步数据和API交互的行为。

异步数据调用service接口的行为叫做call(召唤)

一个路由的文件目录

路由users
文件夹和路由名一样 users
component组件
index.js
model.js
service.js

使用Umi搭建基础列表页面

根据UmiJS的快速上手搭建脚手架

如果想进入约定式路由,打开.umirc.js删除里面routes

相同的,如果配置路由也在.umirc.js配置

使用 CSS

src/global.css为全局样式,存在此文件,会被自动引入到入口文件最前面。

在Umi中用插件

model.js

dva

在这里插入图片描述

视频学习地址:https://www.bilibili.com/video/BV1qz411z7s3