上文中，我們簡(jiǎn)單介紹了umi的使用規(guī)則涝登，項(xiàng)目構(gòu)建流程雄家。本文我們主要來(lái)談一下dva在umi中如何來(lái)使用。
項(xiàng)目開(kāi)發(fā)中胀滚，umi如何使用antd這個(gè)ui框架趟济。
安裝插件umi-plugin-react
yarn add umi-plugin-react? ｜｜? npm install umi-plugin-react
與src同級(jí)構(gòu)建config目錄 ，目錄中創(chuàng)建config.js文件蛛淋，寫入以下配置
export default {? plugins: [? ? [? ? ? 'umi-plugin-react',? ? ? {? ? ? ? antd:true,
? ? ? ? dva: true,? ? ? },? ? ]? ],};
使用antd中的組件 例：
import {Button} from 'antd';<Button type="primary">按鈕</Button>
以上就是在umi中使用antd這個(gè)ui框架咙好。下面我們來(lái)說(shuō)一下如何使用dva篡腌。
在src中構(gòu)建models目錄褐荷。該目錄中存在數(shù)據(jù)模型，全局模型嘹悼，所有pages中均可使用模型種的數(shù)據(jù)叛甫。
例如在models中構(gòu)建info.js 模型。內(nèi)部代碼編寫如下：
import * as api from '../until/getpro';? //封裝的axio調(diào)用接口export default{ //命名空間 namespace:'info', state:{ name:'許凱', age:24, des:"真帥呀Ｑ罨铩Ｆ浼唷！", list:[] }, //處理state－－同步 reducers:{ change(state,{payload}){ return {...state,...payload} } }, // 異步 // yield表示后面的方法執(zhí)行完以后 call表示調(diào)用一個(gè)api接口 // put表示一個(gè)派發(fā) 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
} }) }}
組件內(nèi)使用如下：
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 } })} ? >設(shè)置年齡</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 } })} ? >獲取數(shù)據(jù)</Button> ? { ? props.list.map((item)=>{ ? return(<div key={item.pid}>{item.pname}</div>) ? }) ? }? ? </div>? );}export default connect(state=>state.info)(Index)
以上就是無(wú)狀態(tài)組件中調(diào)用dva管理的數(shù)據(jù)限匣，原理還是依賴于react-redux 通過(guò)connect生成容器組件抖苦，獲取數(shù)據(jù)。
無(wú)狀態(tài)組件中定義局部狀態(tài)米死，可以選擇16.8新增的hook來(lái)定義锌历，useState定義局部狀態(tài)，useEffect模擬生命周期峦筒。
