Dva 基本操作

Posted 2023-03-22

参考技术A 一块学习，大家相互参考。

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

安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令（ 不能访问？ ）。现在，你可以通过 dva new 创建新应用。

这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。

然后我们 cd 进入 dva-quickstart 目录，并启动开发服务器：

几秒钟后，你会看到以下输出：

在浏览器里打开 http://localhost:8000 ，你会看到 dva 的欢迎界面。

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

编辑 .webpackrc ，使 babel-plugin-import 插件生效。
[图片上传中...(-e0b96d-1532076307190-0)]

我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。

新建 route component routes/Products.js ，内容如下：

添加路由信息到路由表，编辑 router.js :

然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 <h2> 标签。

随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component 。

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

新建 model models/products.js ：

这个 model 里：

然后别忘记在 index.js 里载入他：

到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢?

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。

编辑 routes/Products.js ，替换为以下内容：

最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js ：

react dva 基本介绍

参考技术A 前端页面是数据的一种表现形式。让数据以一种可见的方式呈现给系统的使用者。用户可以通过前端查看数据，操作（增加，修改，删除）数据。

页面的组件就是表现形式。所以前端页面就是一系列组件的组合。

编写页面就是将数据和页面的这些表现形式绑定起来。将数据绑定在特定的页面组件上；对用户提交的数据修改请求进行响应，改变数据，再把新的数据绑定到页面上。

jquery这种前端是通过直接操作dom，来将数据和dom中的组件进行映射。 所有有2步操作：

react是通过数据和组件的绑定关系，自动生成dom组件的一个框架。所以我们在编写react组件时，就是在设置数据和dom组件的映射关系。告诉组件怎么显示数据，通过组件怎么提交修改数据的请求。既然是自动生成的dom，所有组件就有一个生命周期。

所以编写react组件要做这几件事情：

前端是显示数据的，所以前端将显示数据和操作数据分离开，将数据，数据操作全部放到一个地方单独管理起来。每次数据操作之后，先修改数据，再将新的数据告诉react组件。react组件会根据新的数据，重新生成新的dom组件。

dva对数据的管理，是以redux为基础，redux将所有页面的数据以一个树状的结构保存起来（因为对于一个但页面应用，所有的dom组件都是以树状组织起来的。所以数据和dom组件都可以找到一一对应的关系）

所以dva要做这样几件事情：

dva将树状结构数据，拆分成不同的数据块管理起来。每个数据块通过一个model组织起来（通常model会和react的组件对应起来）。

每个model中包含这些东西：

相关链接： react:

https://reactjs.org/tutorial/tutorial.html

https://doc.react-china.org/docs/components-and-props.html

redux:

http://cn.redux.js.org/docs/basics/UsageWithReact.html

dva:

https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md

es6:

http://es6.ruanyifeng.com/#docs/intro