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

tech2022-11-26  90

文章目录

简述Dva,Umi和路由的理解Dva基本流程与文件目录规划ModelReducer、EffectDva订阅 (Subcription)service(服务) 一个路由的文件目录 使用Umi搭建基础列表页面如果想进入约定式路由,打开.umirc.js删除里面routes使用 CSS在Umi中用插件dva

简述Dva,Umi和路由的理解

dva中讲到约定式路由是如果没有路由配置文件,即按照src/page文件夹下的文件目录结构来生成路由

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

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

最新回复(0)