一 Use umi with dva
按目錄約定注冊 model带猴，無需手動 app.model
文件名即 namespace桶良，可以省去 model 導出的 namespace key
無需手寫 router.js得糜，交給 umi 處理代兵，支持 model 和 component 的按需加載
內(nèi)置 query-string 處理辆沦，無需再手動解碼和編碼
內(nèi)置 dva-loading 和 dva-immer瓦戚，其中 dva-immer 需通過配置開啟
開箱即用紫谷，無需安裝額外依賴轿亮，比如 dva刊驴、dva-loading姿搜、dva-immer、path-to-regexp捆憎、object-assign舅柜、react、react-dom 等
1,1 model 注冊
model 分兩類躲惰，一是全局 model致份，二是頁面 model。全局 model 存于 /src/models/ 目錄础拨，所有頁面都可引用氮块；頁面 model 不能被其他頁面所引用。
規(guī)則如下：
src/models//.js 為 global model
src/pages//models//.js 為 page model
global model 全量載入诡宗，page model 在 production 時按需載入滔蝉，在 development 時全量載入
page model 為 page js 所在路徑下 models//.js 的文件
page model 會向上查找，比如 page js 為 pages/a/b.js塔沃，他的 page model 為 pages/a/b/models//.js + pages/a/models//.js蝠引，依次類推
約定 model.js 為單文件 model，解決只有一個 model 時不需要建 models 目錄的問題蛀柴，有 model.js 則不去找 models//.js
2--url 變化了螃概，但頁面組件不刷新，是什么原因鸽疾？
layouts/index.js 里如果用了 connect 傳數(shù)據(jù)谅年，需要用 umi/withRouter 高階一下。
import withRouter from 'umi/withRouter';
export default withRouter(connect(mapStateToProps)(LayoutComponent));
3---全局 layout 使用 connect 后路由切換后沒有刷新肮韧？
需用 withRouter 包一下導出的 react 組件，注意順序。
import withRouter from 'umi/withRouter';
export default withRouter(connect()(Layout));
運行時配置
umi 約定 src 目錄下的 app.js 為運行時的配置文件弄企。
配置列表 1: patchRoutes 用于運行時修改路由超燃。參數(shù)： routes: Array，路由配置
export function patchRoutes(routes) {
routes[0].unshift({
path: '/foo',
component: require('./routes/foo').default,
});
}
2, render 用于改寫把整個應用 render 到 dom 樹里的方法拘领。
參數(shù)：oldRender意乓， Function，原始 render 方法约素，需至少被調(diào)用一次
注 ：可能的場景：渲染應用之前做權(quán)限校驗届良，不通過則跳轉(zhuǎn)到登錄頁
export function render(oldRender) {
setTimeout(oldRender, 1000);
}
3，onRouteChange 用于在初始加載和路由切換時做一些事情圣猎。
參數(shù)：Object
location：Object, history 提供的 location 對象
routes: Array, 路由配置
action: PUSH|POP|REPLACE|undefined士葫，初次加載時為 undefined
注：可能的場景：埋點統(tǒng)計
export function onRouteChange({ location, routes, action }) {
bacon(location.pathname);
}
4，modifyRouteProps 修改傳給路由組件的 props
參數(shù) ：1）props送悔，Object慢显，原始 props 。 2）Object route欠啤，Object荚藻，當前路由配置
export function modifyRouteProps(props, { route }) {
return { ...props, foo: 'bar' };
}
5 rootContainer 用于封裝 root container，可以取一部分洁段，或者外面套一層应狱，等等。
參數(shù)：container祠丝，ReactComponent疾呻，React 應用最上層的根組件
export function rootContainer(container) {
const DvaContainer = require('@tmp/DvaContainer').default;
return React.createElement(DvaContainer, null, container);
}
