umi 官方文档摘记二进阶

一 Use umi with dva
按目录约定注册 model，无需手动 app.model
文件名即 namespace，可以省去 model 导出的 namespace key
无需手写 router.js，交给 umi 处理，支持 model 和 component 的按需加载
内置 query-string 处理，无需再手动解码和编码
内置 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 不能被其他页面所引用。
规则如下：
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 传数据，需要用 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 用于运行时修改路由。参数： routes: Array，路由配置

export function patchRoutes(routes) {
  routes[0].unshift({
    path: '/foo',
    component: require('./routes/foo').default,
  });
}

2, render 用于改写把整个应用 render 到 dom 树里的方法。
参数：oldRender， Function，原始 render 方法，需至少被调用一次
注 ：可能的场景：渲染应用之前做权限校验，不通过则跳转到登录页

export function render(oldRender) {
  setTimeout(oldRender, 1000);
}

3，onRouteChange 用于在初始加载和路由切换时做一些事情。
参数：Object
location：Object, history 提供的 location 对象
routes: Array, 路由配置
action: PUSH|POP|REPLACE|undefined，初次加载时为 undefined
注：可能的场景：埋点统计

export function onRouteChange({ location, routes, action }) {
  bacon(location.pathname);
}

4，modifyRouteProps 修改传给路由组件的 props
参数 ：1）props，Object，原始 props 。 2）Object route，Object，当前路由配置

export function modifyRouteProps(props, { route }) {
  return { ...props, foo: 'bar' };
}

5 rootContainer 用于封装 root container，可以取一部分，或者外面套一层，等等。
参数：container，ReactComponent，React 应用最上层的根组件

export function rootContainer(container) {
  const DvaContainer = require('@tmp/DvaContainer').default;
  return React.createElement(DvaContainer, null, container);
}