企業(yè)級(jí)最佳實(shí)踐lesson6項(xiàng)目實(shí)戰(zhàn)

項(xiàng)目實(shí)戰(zhàn)

why它和dva、roadhog理解Useumiwithdva+umi的約定Hash路由資Antd知識(shí)umireact應(yīng)用why開(kāi)箱即用，內(nèi)置react、react-router等類next.js且功能完備的路由約定，同時(shí)支持配置的路期splitting支持靜態(tài)頁(yè)面導(dǎo)出，適配各種環(huán)境，比如中臺(tái)業(yè)務(wù)、無(wú)開(kāi)發(fā)啟動(dòng)快，支持一鍵開(kāi)啟dll和hard-source-wck-plugin等一鍵兼容到IE9，基于umi-plugin-完善的TypeScript支持，包括d.ts定義和umitest與dva數(shù)據(jù)流的深入融合，支持duckdirectory、model的自動(dòng)加載、codesplitting等等它和dva、roadhogroadhog是基于wck的封裝工具，目的是簡(jiǎn)wck的配umi可以簡(jiǎn)單地理解為roadhog+路由，思路類似方式簡(jiǎn)化React開(kāi)發(fā)dva目前是純粹的數(shù)據(jù)流，和umi以及roadhog之間并人覺(jué)得umi+dva是比較搭的dva首先是一個(gè)基于redux和redux-saga的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)，dva還額外內(nèi)置了react-router和易學(xué)易用，僅有6個(gè)api，對(duì)reduxumi使用后更是降低為0elm概念，通過(guò)reducers,e?ects和subscriptions插件機(jī)制，比如dva-loading可以自動(dòng)處理loading狀態(tài)，不用一遍遍地寫showLoading和hideLoading支持HMR（模塊熱替換），基于babel-plugin-dva-實(shí)現(xiàn)components、routes和models的HMR理解軟分：顧e為數(shù)流易，們成了store，reucr，ctin等模塊，各司其職，軟件開(kāi)發(fā)也是一樣 負(fù)責(zé)與用戶直接打交道：渲染頁(yè)面、接受用戶作輸入，側(cè)重于展示型交互性邏輯ModelPage做數(shù)據(jù)、狀態(tài)的讀Service負(fù)責(zé)與HTTP接口對(duì)接，進(jìn)行純粹的數(shù)據(jù)讀DVA是基于redux、redux-saga和react-router的輕量級(jí)前端框架及最佳實(shí)踐沉淀，api如下：state狀e?ectsubscriptionsrouter namespace：model名空間，只能用字符串。一個(gè)大型應(yīng)用可能包含多個(gè)model，通過(guò)namespace區(qū) reducers：用于修改state，由 reducer是一個(gè)純函數(shù)，它接受當(dāng)前的state及一個(gè)action對(duì)象。action對(duì)象里面可以包含數(shù)據(jù)體（payload）作為入?yún)?，需要返回一個(gè)新的state effects：用于處理異步操作（例如：與服務(wù)端交互）action觸發(fā)。但是，它不可以修改state，要通過(guò)觸發(fā)action調(diào)用reducer實(shí)現(xiàn)對(duì)state action：是reducers及e?ects的觸發(fā)?，一般是一個(gè)對(duì)象，形如type'add',payloadtodo，通過(guò)type屬性可以匹配到具體某個(gè)reducer或者e?ect，payload屬性則是數(shù)據(jù)體，用于傳送給reducer或e?ect。Useumiwith自>=umi@2dva的整合可以直接通過(guò)umi-plugin-特 約 文件名即namespace，可以省去model導(dǎo)出的無(wú)需手寫router.js，交給umi處理，支持modelcomponent的按內(nèi)置query-string處理，無(wú)需再手動(dòng)和編內(nèi)置dva-loading和dva-immer，其中dva-immer需開(kāi)箱即用dva、dva-loading、react-dom等dva+umisrccomponents組件con?g配置mock數(shù)據(jù)模擬安環(huán)境要求：node版本新建立一個(gè)空文件夾：mkdirlesson6-進(jìn)入文件夾：cdlesson6-創(chuàng)建：yarncreateumi安裝依賴：?jiǎn)?dòng)：yarnstart或者umi其他例子：如umi- Umi基本使umiumigpageumiumigpagemore/index--importrouterfrom'umi/router'umiumi about:路umi會(huì)根 umiumigpageimportstylesfromexportdefaultfunction({match}){return(<div<h1>Page}{{path:component:$umi里約定動(dòng)態(tài)路由如果 $umiumigpageexportexportdefaultfunction({location,match{const{id}=match.params;return(<div<h1>Page<p>{id||'沒(méi)有}{{path:component:umi里約定 的layout。layout文件需要返回一個(gè)

umiumigpage////創(chuàng)建父組件umigpageofLayout/_layoutexportdefaultfunction(props){return<h1>Page)}umiumigpageexportexportdefault{return<div<h1>Page}

exportexportdefault{return<Header{props.children<Footer}你可能需要針對(duì)不同路由輸出不同的全局layout，umi不支 location.path做區(qū)分，渲染不同的layout。比如想要針對(duì)/login輸出簡(jiǎn)單布局exportexportdefaultfunction(props)if(props.location.pathname==='/login')return}}return<Header{props.children<Footer}在頁(yè)面間在umi里，頁(yè)面之間跳轉(zhuǎn)有兩種方式：式和命令式式基于umi/linkReactimportimportLinkfromexportdefault()=><Linkto="/list">Gotolist基于umi/router，通常在處理中被調(diào)用importimportrouterfromfunctiongoToListPage(){}更多命令式的跳轉(zhuǎn)方法，詳 啟用Hashumi默認(rèn)是用的BrowserHistory，如果要用HashHistory，exportexport{history:}更多配實(shí)使用狀態(tài)：state+創(chuàng)建頁(yè)面more.jsumigpagemore/index--importimportReact,{Component}from'react';import{PageHeaderWrapper}from'@ant-import{Card,Form,Input,Button,Table}from'antd';import{connect}fromimportstylesfromconstcolumns={title:'',dataIndex:'name',key:'name',{title:'年齡',dataIndex'age',key:'age',{title:'住址',dataIndex'city',key:'city',exportdefaultconnect(({more})=>({}),getMoreData:()=>({type:'more/getChannelData'}),getMoreDataBySearch:search=>({type:'more/getChannelDataBySearch',payload:searchclassMoreextends{componentDidMount(){}onFinish=values{console.log('values',values);//sy-onFinishFailed=err{console.log('err',err);//sy-render()const{data}=ps.more;console.log('oo',ps);//sy-logreturn(<PageHeaderWrapper<FormonFinish={this.onFinish}rulesrequired:true,message:'請(qǐng)輸入查詢'}]}> <Button<Buttontype="primary"<TabledataSource={data}{columns}rowKey="id"}更新模型importimport{getChannelData,}fromconstmodel={namespace:'more',state:{data:effects:*getChannelData({payload},{call,put{constresponse=call(getChannelData,payload);yieldput({type:'channelData',payload:response,*getChannelDataBySearch({payload{call,put})constresponse=yieldcall(getChannelDataBySearch,payload);console.log('has',response,yieldtype:'channelData',payload:response,reducers:channelData(state,{payload{return{...state,[...payload.data]exportexportdefaultimportrequestfrom'@/utils/request';exportasyncfunctiongetChannelData(params){return{method:}exportasyncfunctiongetChannelDataBySearch(params){request('/api/getChannelDataBySearch',{method:'post',data:params,} constconstchannelTableData=[];for(leti=0;i<10;i++){d:i,name'名字i,age:i,city城市}function{constres=for(leti=0;i<1