首页 > 其他分享 >dva入门

dva入门

时间:2023-02-01 10:04:34浏览次数:34  
标签:入门 ## app dva action model redux


一、dva 介绍

dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。dva = React-Router + Redux + Redux-saga

二、dva 概念

数据流向:
数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变State,所以在dva中,数据流向非常清晰简明,参考下面的图

dva入门_reactjs

三、Models

通过 dva()可以产生一个app实例,该app实例上有这么几个重要的api
## 1. State
初始化数据的,可以是任意的值,类似于vuex中的state模块/redux中reducers模块中的initState
## 2. Action
action就是一个普通的js对象,它是改变 State 的唯一途径。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,类似 于redux中的action
## 3. Dispatch
dispatching function 是一个用于触发 action 的函数
## 4. Reducer
相当于redux中的reducer,根据之前的状态和action生成最新的状态
## 5. Effect
用于异步操作,底层是使用了redux-saga
## 6. Subscription
用于订阅一个数据源,然后根据条件 dispatch 需要的 action
## 7. namespace
model的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过 . 的方式创建多层命名空间

四、Router

dva 实例提供了 router 方法来控制路由,使用的是react-router
在 dva 中,通常需要 connect Model的组件都是 Route Components(路由组件),组织在/routes/目录下,而/components/目录下则是纯组件(非路由组件)

五、相关 Api

dynamic:
解决组件动态加载问题的 util 方法
使用:
import dynamic from 'dva/dynamic';

const UserPageComponent = dynamic({
app,
models: () => [
import('./models/users'),
],
component: () => import('./routes/UserPage'),
});
## app: dva 实例,加载 models 时需要
## models: 返回 Promise 数组的函数,Promise 返回 dva model
## component:返回 Promise 的函数,Promise 返回 React Component
生命周期钩子:
1.onError(捕获错误)
2.onAction(action被dispatch触发)
3.onStateChange(state改变时触发,可用于同步 state 到 localStorage,服务器端)
4.onReducer(封装reducer执行)
5.onEffect(封装effect执行)
6.onHmr(模块热替换相关)
7.extraReducers(指定额外的 reducer)
8.extraEnhancers(指定额外的StoreEnhancer)
app实例上的api
1.app.model(model) // 注册model
2.app.unmodel(namespace) // 取消model注册,清理 reducers, effects 和 subscriptions。subscription 如果没有返回 unlisten 函数,使用 app.unmodel 会给予警告
3.app.replaceModel(model) // 替换model为新model,只在app.start()之后可用.会保留旧的state状态
4.app.router((router) => routerConfig) // 注册路由表
5.app.start(selector) // 启动应用


标签:入门,##,app,dva,action,model,redux
From: https://blog.51cto.com/u_14389461/6030674

相关文章

  • Springcloud之Gateway入门
    API网关出现的原因是微服务架构的出现,不同的微服务一般会有不同的网络地址,而外部客户端可能需要调用多个服务的接口才能完成一个业务需求,如果让客户端直接与各个微服务通信......
  • Nacos入门
    1、介绍①概要官网:home(nacos.io)Nacos:DynamicNamingandConfigurationService(动态命名和配置服务)你可以看为:Eureka(注册中心)+Config(配置中心)+Bus(消息总线)Nacos......
  • 大数据实时多维OLAP分析数据库Apache Druid入门分享-上
    @目录概述定义MPP和Lambda补充说明概述特征适用场景不适用场景横向对比部署单机部署入门示例概述定义ApacheDruid官网地址https://druid.apache.org/ApacheDruid......
  • drf从入门到精通02
    昨日回顾#1web应用开发模式 -前后端混合:bbs项目,图书管理---->模板语法--->后端通过模板语法把模板【xx.html】-前后端分离:后端,不需要写前端,只需要提供接口......
  • Java快速入门
    初学者快速学习Java1-介绍2- 创建Java工程3- 原始数据类型4- 变量5-控制流程5.1- if-else语句5.2- 一般操作符5.3-布尔值5.4- switch-case-defau......
  • Solidity极简入门#5. 变量数据存储和作用域
    Solidity中的引用类型引用类型(ReferenceType):包括数组(array),结构体(struct)和映射(mapping),这类变量占空间大,赋值时候直接传递地址(类似指针)。由于这类变量比较复杂,占用存储空间......
  • Elasticsearch 从入门到实践 小册笔记
    MappingJSON中是可以嵌套对象的,保存对象类型可以用object类型,但实际上在ES中会将原JSON文档扁平化存储的。假如作者字段是一个对象,那么可以表示为:{"author":{......
  • drf入门规范——restful规范,序列化反序列化,django原生接口与drf接口案例
    restful规范(重要)概念REST全称是RepresentationalStateTransfer,中文意思是表述(编者注:通常译为表征性状态转移)。它首次出现在2000年RoyFielding的博士论文中。RESTful......
  • Unicorn快速入门
    看James给的SPIR-V看麻了,转过来快速入门一下unicorn。早该学学了。官网:https://www.unicorn-engine.org/(搞完这个继续看SPIR-V(确信))简介与安装Unicorn是一个基于QEMU的......
  • 内网渗透入门(一)
    通过sql注入拿到webshellintooutfile导出文件intodumpfile导出文件将查询的结果导出成文件如何找路径?————传入错误参数,就会爆出路径写入一句话木马,连接菜刀......