dva开发框架简介和演示

最新推荐文章于 2024-05-02 14:26:53 发布

驹意心猿

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量7.7k

点赞数 1

文章标签：前端 react.js

本文链接：https://blog.csdn.net/q5926167/article/details/126930956

版权

1、dva是什么

2、dva工程如何搭建（在已安装node.js的前提下）

3、dva数据传递

4、代码案例和演示

引用和参考

1、dva是什么

dva 是一个react开发框架中的脚手架。其主要目的是为了简化react数据之间的传递工作。

React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。

如果开发大应用，还需要解决以下两个问题。

通信：组件之间如何通信？
数据流：数据如何和视图串联起来、路由和数据如何绑定、如何编写异步逻辑等等

而针对上述问题React 只提供了一种通信手段：传参。对于大应用，很不方便。当组件过多时，考虑参数传递问题将会浪费我们不少的时间。

然而dva的出现则基本解决了这些问题。他将市面上流行的react三个应用框架React-Router + Redux + Redux-saga包装了在一起。所以我们只需引入一个dva就可以对react整个数据流程进行封装和操作。

· 路由： React-Router

· 架构： Redux

· 异步操作： Redux-saga

2、dva工程如何搭建（在已安装node.js的前提下）

①、通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

  $ npm install dva-cli -g

  $ dva -v

②、通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的

$ npm install antd babel-plugin-import --save

编辑 .webpackrc，使 babel-plugin-import 插件生效。

{
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
}

③、安装完 dva-cli 之后，你可以通过 dva new 创建新应用。

$ dva new dva-demo

④、启动刚刚创建的项目

$ cd dva-demo
    
$ npm start

Compiled successfully!

The app is running at:

  http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

输入http://localhost:8000/#/

3、dva数据传递

使用之前先了解dva是如何将react中数据进行传递的：

1、View ：就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化， View 就会自动

Route：view页面最外层，负责引入component组件进行展示。
- componet：组件构成的视图层，他可以是一个组件，也可以是由多个组件构成。

2、dispatch 方法：一个函数，发送 Action 到 State，当我们需要调用后台接口时，就需要通过dispatch 来调用。

3、action：是一个普通 javascript 对象，它是改变 State 的唯一途径。

4、model

namespace：model的唯一标识id,
- state：表示 Model 的状态数据，相当于一个数据容器，可以保存我们从后台返回或者自定义的数据。
- reducer ：可以看做是 state 的计算器。它的作用是根据 Action，从上一个 State 算出当前 State。
- effect ：在这个方法中可以异步调用后台的接口传递/读取数据
- subscription：，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等

5、connect：是一个函数，绑定 State 到 View