上文中，我们简单介绍了umi的使用规则，项目构建流程。本文我们主要来谈一下dva在umi中如何来使用。
项目开发中，umi如何使用antd这个ui框架。
安装插件umi-plugin-react
yarn add umi-plugin-react ｜｜ npm install umi-plugin-react
与src同级构建config目录 ，目录中创建config.js文件，写入以下配置
export default { plugins: [ [ 'umi-plugin-react', { antd:true,
dva: true, }, ] ],};
使用antd中的组件 例：
import {Button} from 'antd';<Button type="primary">按钮</Button>
以上就是在umi中使用antd这个ui框架。下面我们来说一下如何使用dva。
在src中构建models目录。该目录中存在数据模型，全局模型，所有pages中均可使用模型种的数据。
例如在models中构建info.js 模型。内部代码编写如下：
import * as api from '../until/getpro'; //封装的axio调用接口export default{ //命名空间 namespace:'info', state:{ name:'许凯', age:24, des:"真帅呀！！！", list:[] }, //处理state－－同步 reducers:{ change(state,{payload}){ return {...state,...payload} } }, // 异步 // yield表示后面的方法执行完以后 call表示调用一个api接口 // put表示一个派发 effects:{ *getData(payload,{call,put}){ console.log(payload) const result=yield call(api.getProList,payload.payload) console.log(result) yield put({ type:'change', payload:{ list:result.data.data
} }) }}
组件内使用如下：
import {connect} from 'dva'; function Index(props) { return ( <div> <h1>Page index</h1> <Button type="primary" onClick={()=>props.dispatch({ type:'info/change', payload:{ age:props.age-1 } })} >设置年龄</Button> <h2>{props.name}</h2> <h2>{props.age}</h2> <h2>{props.des}</h2> <Button type="primary" onClick={()=>props.dispatch({ type:'info/getData', payload:{ uid:19802, pagesize:50 } })} >获取数据</Button> { props.list.map((item)=>{ return(<div key={item.pid}>{item.pname}</div>) }) } </div> );}export default connect(state=>state.info)(Index)
以上就是无状态组件中调用dva管理的数据，原理还是依赖于react-redux 通过connect生成容器组件，获取数据。
无状态组件中定义局部状态，可以选择16.8新增的hook来定义，useState定义局部状态，useEffect模拟生命周期。
