使用Dva及AntDesign,官网实战后的学习理解

目录

写完Ant Design Pro的才发现这篇还没有发表,个人无限感叹笔记不能放草稿箱。若有不正确的地方无限欢迎dalao指导菜鸟。 使用Ant Design Pro笔记 ClickHere》

  • 目录
  • 关于Dva
  • 官网的项目实战讲解
    • 全局安装dva
    • 查看dva版本,存在则可用dva命令
    • 创建应用
    • 打开应用
    • 查看初始配置理解
    • 使用 antd
    • 尝试写一个新页面(创建路由)
    • 简单写个List(详解各个地方)
      • 效果
      • 组件UI Component
      • 定义 Model(处理数据、及其逻辑)
      • connect 起来
    • 警告
  • 快捷链接

关于Dva

Dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。

官网的项目实战讲解

官网的项目实战 ClickHere》

全局安装dva

有-g就是全局安装

cnpm install dva-cli -g

查看dva版本,存在则可用dva命令


dva -v
dva-cli version 0.9.1

创建应用

通过 dva new 创建新应用,下方pro-name填写你要创建的应用的命名

dva new pro-name

耐心等出现happy hacking!即成功了。

打开应用

进入文件并使用默认命令打开入口文件

cd pro-name
cnpm start

此时将自动打开一个链接为http://localhost:8000/的你的应用

使用Dva及AntDesign,官网实战后的学习理解_第1张图片
如上图证明进入了这个依赖了dva的react项目了

查看初始配置理解

我的笔记:【React学习笔记】【应用的结构】有详细说明基础react项目各部分文件及依赖的理解 ClickHere》

如下图为dva创建的react应用的package.json文件,其中的依赖已经集成了部分。

像dependencies里的dva就已经集成了 redux、redux-saga 和 react-router。无需另外在安装依赖。
devDependencies放置项目在开发和测试环境中依赖的包,其中最明显作用的就是ESlint的包,这是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
使用Dva及AntDesign,官网实战后的学习理解_第2张图片
开发过程中获得ESlint错误显示可给编辑器进行设置,此处以webstorm作为例子
使用Dva及AntDesign,官网实战后的学习理解_第3张图片
若语法有错误,则如下图,显示红色波浪线,以及右边的红色色块提示。
使用Dva及AntDesign,官网实战后的学习理解_第4张图片

使用 antd

通过 npm 安装 antd 和 babel-plugin-import 。–save用于将这两个东西加载在package.json

npm install antd babel-plugin-import --save

如下图:
使用Dva及AntDesign,官网实战后的学习理解_第5张图片
其中babel-plugin-import 是用来按需加载 antd 的脚本和样式的。按需加载如下:import { Button } from ‘antd’;按需加载了ant里面的Button组件。

尝试写一个新页面(创建路由)

新建routes/Products.js

import React from 'react';

const Products = (props) => (
  

List of Products

); export default Products;

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

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

然后在浏览器里打开 http://localhost:8000/#/products,就能看到如下新的页面
使用Dva及AntDesign,官网实战后的学习理解_第6张图片

简单写个List(详解各个地方)

效果

使用Dva及AntDesign,官网实战后的学习理解_第7张图片

组件UI Component

新建 components/ProductList.js 文件:

import React from 'react';
// 利用prop-types第三方库对组件的props中的变量进行类型检测
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';

// onDelete,products从父组件routes/Products中的组件通过属性通信,将值传给了本子组件。其中products是表格所需的数组数据
const ProductList = ({ onDelete, products }) => {
// 官方文档查看基本表格的形式
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
    // 此处的text是指该表格当行的值,此处return没有应用可以删除,而record理解为表明该行全部的值,具体的属性即为我们设置的dataIndex。比如以下的record.id即为当行数据对应id值,record.name即为当行数据对应name值
      return (
        "Delete?" onConfirm={() => onDelete(record.id)}>
          
        
      );
    },
  }];
  return (
    
  );
};

//组件的props中的变量进行类型检测
ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

// 出口组件
exportdefault ProductList;

定义 Model(处理数据、及其逻辑)

dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects(理解像ajax的东西调用后台api就好),订阅数据源的 subscriptions 。
新建 model models/products.js :

export default {
  namespace: 'products',
  state: [],
  reducers: {
  //此处是模拟一个api,通过delete得知数据操作,使用filter删除对应id的数据。实际开发中一般是post一个你要删除的对象的key或者多个对象的key数组即可。
    'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};

理解:
1. namespace 表示在全局 state 上的 key
2. state 是初始值,在这里是空数组
3. reducers 等同于 redux 里的 reducer,接收 action,同步更新 state

在 index.js载入你的model

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

connect 起来

串联model 和 component
编辑 routes/Products.js(也就是修改你的新页面):
这只是其中一种写法

import React from 'react';
// dva提供的 connect 方法
import { connect } from 'dva';
// ProductList 组件入口(即那个表格)
import ProductList from '../components/ProductList';


const Products = ({ dispatch, products }) => {
//调用串联的model,命名空间为ProductList 的delete,并传id过去
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    

List of Products

// 引入ProductList 组件,调用了handleDelete方法获取子组件的方法onDelete中传值的id,通过属性值传了表格的数据给子组件。
); }; // export default Products; // 串联命名空间为products的model export default connect(({ products }) => ({ products, }))(Products);

最后,我们还需要一些初始数据让这个应用 run 起来。编辑 index.js:
initialState初始添加了状态值products。此处只用于静态调试用的数据。

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

刷新浏览器,应该能看到效果。

警告

这里写图片描述

Warning: Each record in table should have a unique key prop,or set rowKey to an unique primary key.
Warning: Each record in dataSource of table should have a unique key prop, or set rowKey of Table to an unique primary key, see https://u.ant.design/table-row-key
警告原因:表中的每个记录都应该有一个唯一的“key”道具,或者将“rowKey”设置为一个唯一的主键。

解决方法如下:
使用Dva及AntDesign,官网实战后的学习理解_第8张图片

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~

你可能感兴趣的:(前端(js,html,css,less),ReactJs)