Dva

简单描述

1 Dva 可认为是一个 CLI, 来搭建一个 React 项目   // 但目前已经被作者弃用, 推介使用 Umi

2 Dva 核心是提供一个, 基于 redux 和 redux-saga 的, 便于操作的数据流方案   // Umi 中也是用的此数据流方案

3 学习点 -> "数据流方案" + "数据请求库 fetch"   

4 https://gitee.com/Fzzhang_wei/dva-hh   // 项目练习环境

5 https://www.bilibili.com/video/BV1s7411v73j?p=1   // 视频学习地址

基础目录结构

  ┏━ mock  //用于模拟一些假数据来使用
  ┣━ public  //放置那个html 文件
  ┣━ src
     ┣━ odels  //放置 redux 部分
     ┣━ routes  //放置单文件组件, 类似 pages 文件
     ┣━ services  //调用请求的路径配置
     ┣━ utils  // 这个应该是一些工具方法, 默认放置的数据请求的二次封装
     ┣━ router.js  //路由配置文件 --> 注意一下使用方式
     ┣━ services  //配置数据请求的, 默认放置了一个路径集中管理的文件
  ┗━ .webpackrc  //跨域代理的配置文件

路由配置

1 新建单文件组件位置: routes/A1.js

2 路由配置文件: src/router.js
  + import A1 from "./routes/A1"
  + <Route path="/a1" exact component={A1}/>

基础 API

1 跳转标签

  + import {Link} from 'dva/router'
  + <Link to="/"> 首页</Link>  //跳转到首页

2 高阶组件

  + import {withRouter} from 'dva/router'   // 被该组件修饰的 UI组件, 可以设置编程式导航
  + this.props.history.push("/")  //跳转到首页
  + export default withRouter(A1)  //高阶组件修饰步骤

Dva 数据流

1 基本理解
  
  1 单个 model 仓库文件: state + 同步数据处理(reducers) + 异步数据处理(effects) + 全局计算属性(subscriptions)
  
  2 每个 model 仓库文件, 都是一个独立的命名空间, 有自己的空间命名   // 跟 Vuex 的区别点

  3 同步数据处理(reducers) -> 用于操作该 model 仓库的本地数据 (state)

  4 异步数据处理(effects) -> 用于调接口 / 调 reducers 中的方法去操作 (state)

  5 model 仓库 和 单文件组件, 都可以调用数据接口

  6 如果是某个单文件组件的独有数据, 那么再组件内调用数据接口就 OK

  7 如果是多个组件都, 需要去使用, 需要去调用的数据接口, 那么就在 model 仓库中调用数据接口就 OK
    


2 核心文件

  1 models/xx.js   // 独立的数据仓库
  
  2 src/routes/xx.jsx   // 单文件组件, 要使用跟它连接的数据仓库



3 环境配置

  1 /src/index   // 用来做配置, Dva 中需要把每个 modul 仓库添加到全局

  2 /.webpackrc   // Dva 中配置前端请求代理的文件 -- 开发中一般都需要配的, 通常会涉及跨域

  3 /src/utils/request.js   // 基于网络请求库, 数据请求封装

  4 /src/services/example.js   // 基于数据请求封装, 的请求路径封装  [路径集中管理, 便于维护开发]

Mock 数据

1 描述: 有时候在前端开发中, 后端没有及时的提供数据接口, 我们拿不到数据怎么办 "mock 就是我们前模拟的假数据"


2 操作流程

  1 /mock/testMock.js   // 新建假数据文件

  2 /.roadhogrc.mock.js   // 把假数据文件挂载到项目上

  3 /src/services/examole.js   // 配置请求接口, 然后就可以被调用了

过渡组件 dva-loading

1 简单描述: 

  1 本质作用: dva-loading 只是提供"当前"异步加载方法的状态

  2 当前异步加载方法:  loading.effects['user/query']   // 命名空间 user -> query 异步方法
  
  3 loading 在异步请求发出那一刻, 就会持续监听, 该异步请求方法的状态

  4 在异步请求结束之前 isLoading 的值一直是 true

  5 当此次异步请求结束时 isLoading 的值变成 false, 同时 loading 对象停止监听



2 代码范式   // Dva 项目中需要进行配置一下, 一般通过 umi 使用, 应该不需要配置了吧

  1 配置: /src/index.js   // 配置完成后, 在任何一个单文件组件中, 都可以访问到 loading 对象
    import createLoading from 'dva-loading'
    const app = dva()
    app.use(createLoading())

  2 单文件组件 xx.jsx   
  
    // loading 的获取方式; app = 假设为命名空间
    export default connect( state => ({ app: state.app, loading: state.loading }) )(A1) 
    export default connect( ({ app, loading }) => ({ app, loading }) )(A1)

    // loading 有三个 API 
    1 loading.effects['user/query']
	2 loading.global   // 当页面处于异步加载状态时该值为 true，当页面加载完成时，自动监听该值为 false