前端框架（react+umi+dva+ant design pro ）攻克: 四、dva 应用开发时面对的一些SPA场景即state的规划与灵活应用

一、动态加截model

   避免在程序启动时把所有的model全部加载进来，采用webpack的require.ensure懒加载，即功能页面通过路由切换时，在切换时随着路由动态加载指定的model，例如：

function RouterConfig({ history, app }) {
  const routes = [
    {
      path: '/',
      name: 'IndexPage',
      getComponent(nextState, cb) {
        require.ensure([], (require) => {
          registerModel(app, require('./models/dashboard'));
          cb(null, require('./routes/IndexPage'));
        });
      },
    },
    {
      path: '/users',
      name: 'UsersPage',
      getComponent(nextState, cb) {
        require.ensure([], (require) => {
          registerModel(app, require('./models/users'));
          cb(null, require('./routes/Users'));
        });
      },
    },
  ];

  return <Router history={history} routes={routes} />;
}

二、model共享全局信息

   即全局model，实现路由之间共享数据，例如某一个组件中的数据可以来自多个model，可以获取不同model中的state，然后组合在一起供组件使用，这个组合可以通过effect来定义。

   所有model不是通过视图去规划，而是应按业务来规划，例如详情和列表就是共享同一个全局的model，所以moel分为两种：

    1.全局model，贯穿整个应用生命周期，这时候，就不要把这个model配到懒加载中，而是配到启动时就应创建这个model.

     2.功能视图伴随的model, 适用于某一个页面组件用。

三、model的复用

   多个react组件connect同一个model。

四、动态扩展model

   即原来的model不动，而是去扩展原来的model，这时候要应用对象创建技术，可以写一个工厂函数。

五、长流程的业务逻辑

  灵活多次用put或者call实现状态的多次变更state.

六、take操作进行事件监听
   一次流程的变动，需要扩展到若干个其他model中。

七、多个任务的调度：

  1.串行任务：

  2.并行任务

  3.竞争任务

  4.子任务

七、跨model的通信

     一个流程贯穿多个model的处理技巧。