React-快速上手Dva

蔚落 2022-04-23 14:14 292阅读 0赞

官网地址：[https://dvajs.com/guide/getting-started.html\#connect-%E8%B5%B7%E6%9D%A5][https_dvajs.com_guide_getting-started.html_connect-_E8_B5_B7_E6_9D_A5]

## 安装dva-cli ##

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

<code>$ npm install dva-cli -g
 $ dva -v
 dva-cli version 0.9.1
 </code>

## [＃][Link 1]创建新应用 ##

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

<code>$ dva new dva-quickstart
 </code>

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

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

<code>$ cd dva-quickstart
 $ npm start
 </code>

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

<code>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.
 </code>

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

## [＃][Link 3]使用antd ##

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

<code>$ npm install antd babel-plugin-import --save
 </code>

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

<code>{
 + "extraBabelPlugins": [
 + ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
 + ]
 }
 </code>

> 注：dva-cli基于roadhog实现build和dev，更多`.webpackrc`的配置详见[roadhog＃配置][roadhog]

## [＃][Link 4]定义路由 ##

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

新建路线组件`routes/Products.js`，内容如下：

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

<code>+ import Products from './routes/Products';
 ...
 + <Route path="/products" exact component={Products} />
 </code>

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

## [＃][Link 5]编写UI组件 ##

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

我们来编写一个`ProductList`组件，这样就能在不同的地方显示产品列表了。

新建`components/ProductList.js`文件：

<code>import React from 'react';
 import PropTypes from 'prop-types';
 import { Table, Popconfirm, Button } from 'antd';
 
 const ProductList = ({ onDelete, products }) => {
 const columns = [{
 title: 'Name',
 dataIndex: 'name',
 }, {
 title: 'Actions',
 render: (text, record) => {
 return (
 <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
 <Button>Delete</Button>
 </Popconfirm>
 );
 },
 }];
 return (
 <Table
 dataSource={products}
 columns={columns}
 />
 );
 };
 
 ProductList.propTypes = {
 onDelete: PropTypes.func.isRequired,
 products: PropTypes.array.isRequired,
 };
 
 export default ProductList;
 </code>

## [＃][Link 6]定义模型 ##

完成UI后，现在开始处理数据和逻辑。

dva通过model的概念把一个领域的模型管理起来，包含同步更新状态的redurs，处理异步逻辑的效果，订阅数据源的订阅。

新建模型`models/products.js`：

<code>export default {
 namespace: 'products',
 state: [],
 reducers: {
 'delete'(state, { payload: id }) {
 return state.filter(item => item.id !== id);
 },
 },
 };
 </code>

这个模型里：

*  `namespace` 表示在全局state上的关键
 *  `state` 是初始值，在这里是空数组
 *  `reducers` 等同于redux里的reducer，接收动作，同步更新状态

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

<code>// 3. Model
 + app.model(require('./models/products').default);
 </code>

## [＃][https_dvajs.com_guide_getting-started.html_connect-_E8_B5_B7_E6_9D_A5]连接起来 ##

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

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

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

<code>import React from 'react';
 import { connect } from 'dva';
 import ProductList from '../components/ProductList';
 
 const Products = ({ dispatch, products }) => {
 function handleDelete(id) {
 dispatch({
 type: 'products/delete',
 payload: id,
 });
 }
 return (
 <div>
 <h2>List of Products</h2>
 <ProductList onDelete={handleDelete} products={products} />
 </div>
 );
 };
 
 // export default Products;
 export default connect(({ products }) => ({
 products,
 }))(Products);
 </code>

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

<code>- const app = dva();
 + const app = dva({
 + initialState: {
 + products: [
 + { name: 'dva', id: 1 },
 + { name: 'antd', id: 2 },
 + ],
 + },
 + });
 </code>

刷新浏览器，应该能看到以下效果：

![GQJeDDeUCSTRMMg.gif][]

## [＃][Link 7]构建应用 ##

。完成开发并且在开发环境验证之后，就需要部署给我们的用户了先执行下面的命令：

<code>$ npm run build
 </code>

几秒后，输出应该如下：

<code>> @ build /private/tmp/myapp
 > roadhog build
 
 Creating an optimized production build...
 Compiled successfully.
 
 File sizes after gzip:
 
 82.98 KB dist/index.js
 270 B dist/index.css
 </code>

`build`命令会打包所有的资源，包含JavaScript，CSS，web字体，图像，html等。然后你可以在`dist/`目录下找到这些文件。

[https_dvajs.com_guide_getting-started.html_connect-_E8_B5_B7_E6_9D_A5]: https://dvajs.com/guide/getting-started.html#connect-%E8%B5%B7%E6%9D%A5
[Link 1]: https://dvajs.com/guide/getting-started.html#%E5%88%9B%E5%BB%BA%E6%96%B0%E5%BA%94%E7%94%A8
[Link 2]: http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found
[Link 3]: https://dvajs.com/guide/getting-started.html#%E4%BD%BF%E7%94%A8-antd
[repo]: https://github.com/ant-design/babel-plugin-import
[roadhog]: https://github.com/sorrycc/roadhog#%E9%85%8D%E7%BD%AE
[Link 4]: https://dvajs.com/guide/getting-started.html#%E5%AE%9A%E4%B9%89%E8%B7%AF%E7%94%B1
[Link 5]: https://dvajs.com/guide/getting-started.html#%E7%BC%96%E5%86%99-ui-component
[Link 6]: https://dvajs.com/guide/getting-started.html#%E5%AE%9A%E4%B9%89-model
[GQJeDDeUCSTRMMg.gif]: /images/20220308/ccf1f1c8068b4815a6cdc0547c68b1fe.png
[Link 7]: https://dvajs.com/guide/getting-started.html#%E6%9E%84%E5%BB%BA%E5%BA%94%E7%94%A8