AntDesignPro脚手架+umiJS实践总结

⼀、简介

1、Ant Design Pro

Ant Design Pro是⼀款搭建中后台管理控制台的脚⼿架 ，基于React,dva.js,Ant Design（1）其中dva主要是控制数据流向，是纯粹的数据流，⽤作状态管理

使⽤React技术栈管理⼤型复杂的应⽤往往要使⽤Redux来管理应⽤的状态，然⽽随着深度使⽤，Redux也暴露出了⼀些问题。dva 是⼀种改良Redux的架构⽅案，是基于现有应⽤架构 (redux + react-router + redux-saga 等)的⼀层轻量封装，简化了redux和redux-saga使⽤上的诸多繁琐操作。

（2）ant design是⼀个基于react打造的⼀个服务于企业级产品的UI框架。

2、

以路由为基础，⽤来控制路由

⼆、实践分析

1、使⽤来搭建项⽬，根据官⽹教程⽐较容易，根据官⽹可知，使⽤ant design pro⽣成的项⽬⽬录为：

其中最重要的四个⽂件夹，services、models、mock、pages

sevices：数据接⼝models：数据处理mock：模拟数据pages：页⾯

pages触发models中的⽅法来处理数据，若为异步操作在models中需要调⽤services中的数据接⼝⽅法，在后台未写完时可以通过mock中的模拟数据来调试

具体来说，也即是使⽤dva时，数据流向或者说触发流程为：在pages中的jsx⽂件中通过dispatch触发models中的js⽂件中的effects或者reducers中的⽅法，其中effects中的⽅法是异步操作，通过yield call(调⽤接⼝函数⽅法名)调⽤从services中js⽂件引⼊的定义好的调⽤接⼝⽅法，然后通过yield put({type: 'reduceres中的⽅法'})；来触发 reducers中的⽅法来修改state。

数据流向图如下:

数据的改变发⽣通常是通过：

⽤户交互⾏为（⽤户点击按钮等）浏览器⾏为（如路由跳转等）触发的

当此类⾏为会改变数据的时候可以通过 dispatch 发起⼀个 action，如果是同步⾏为会直接通过 Reducers 改变 State ，如果是异步⾏为（副作⽤）会先触发 Effects 然后流向 Reducers 最终改变 State 。 简单的实例如下：

1、welcome.jsx⽂件

import React from 'react';

import { Form, Input, Button, InputNumber } from 'antd';import { connect } from 'dva';//将form注⼊到props中@Form.create()

//将models中的状态state绑定到props中,解构出myInfo，以myInfo命名绑定到props上@connect(({lhj:{myInfo}})=>({ //箭头函数返回⼀个对象，必须在对象外⾯加上⼀个括号 myInfo}))

class Welcome extends React.Component{ handleSubmit = e=>{

const { form, dispatch } = this.props; e.preventDefault(); //校验输⼊域的值

form.validateFields((err,values) =>{ if(!err){

console.log(values);

//验证成功 传⼊对象{type: 'lhj/check',payload: {...values,}},调⽤lhj中的check函数， dispatch({

type: 'lhj/check', payload: { ...values, } }); } })

//console.log('submit',form.getFieldValue('username')); }

handleReset = ()=>{

this.props.form.resetFields(); }

render(){

const { getFieldDecorator } = this.props.form; return (

export default Welcome;

2、services/lhj.js⽂件

import request from '@/utils/request';export async function lhjCheck(params){ console.log(params,'services')

return request('/api/lhj', { params });}

3、models/lhj⽂件

import {lhjCheck} from '@/services/lhj';const lhjModel = { namespace: 'lhj', state: { myInfo: {

username: '', age: 0, } },

effects: {

*check({ payload },{ call, put }){

// console.log(payload,'lhj/check');

const res = yield call(lhjCheck, payload);

// console.log(res,'res');//res为从mock中返回的虚拟数据 yield put({

type: 'checkInfo',

payload: { myInfo: res }, })

}, },

reducers: {

checkInfo(state, { payload }){

console.log(state,payload,'checkInfo'); return { ...state,

...payload,//同名的会覆盖掉 } },

saveInfo(state){ return { } }, }}

export default lhjModel;

4、mock/lhj.js⽂件

export default { 'Get /api/lhj': { username: 'lhj', age: 24 },}

三、⼏个知识点总结：

1、connect的作⽤是将组件和models结合在⼀起。将models中的state绑定到组件的props中。并提供⼀些额外的功能，譬如dispatch。通过connect来绑定model state。意味着Component⾥可以拿到Model中定义的数据，Model中也能接收到Component⾥dispatch的action。实

现了Model和Component的连接。注意@connect必须放在export default class前⾯

2、dispatch 函数，通过 type 属性指定对应的 actions 类型，⽽这个类型名在 reducers（effects）会⼀⼀对应，从⽽知道该去调⽤哪⼀个reducers（effects），除了 type 以外，其它对象中的参数随意定义，都可以在对应的 reducers（effects）中获取，从⽽实现消息传递，将最新的数据传递过去更新 model 的数据（state）当在组件⾥发起action时，直接dispatch就⾏了（dispatch({

type: `monthCard/query`, payload: {}//需要传递的数据 })

），dva会帮你⾃动调⽤effects/reducers。当发起同步action时，type写成'(namespace)/(reducer)'dva就帮你调⽤对应名字的reducer直接更新state，当发起异步action，type就写成'(namespace)/(effect)',dva就帮你调⽤对应名字的effect,然后通过yield put调⽤reducer来实现异步更新state

3、项⽬的开发流程⼀般是从设计model state开始进⾏抽象数据，完成component后，将组件和model建⽴关联，通过dispatch⼀个action，在reducer中更新数据完成数据同步处理；当需要从服务器获取数据时，通过Effects数据异步处理，然后调⽤Reducer更新全局state。是⼀个单向的数据流动过程。