react umi+dva基本开发流程（2）

上文中，我们简单介绍了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模拟生命周期。