antd pro关键知识点

react+umi+dva+antd

umi

umi是可扩展的企业级前端应用框架，umi以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。

umi相关路由配置等参考官方文档，可实现按需加载，热更新等，文档地址：https://umijs.org/zh-CN/docs/

dva

dva介绍

dva 是一个基于 redux 和 redux-saga 的数据流方案，通过 reducers, effects 和 subscriptions 组织 model dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。把视图和模型连接起来。

动态加载model 如果每个功能页面是通过路由切换，互相之间没有关系的话，通常会使用webpack的require.ensure来做代码模块的懒加载。

动态扩展model 比如说，使用Object.assign来进行对象属性复制，就可以把新的内容添加或者覆盖到原有对象上。可以借助dva社区的dva-model-extend库来做这件事。

使用take操作进行事件监听

多任务调度任务的并行执行

const [result1, result2]  = yield all([
  call(service1, param1),
  call(service2, param2)
])

把多个要并行执行的东西放在一个数组里，就可以并行执行，等所有的都结束之后，进入下个环节，类似promise.all的操作。一般有一些集成界面，比如dashboard，其中各组件之间业务关联较小，就可以用这种方式去分别加载数据，此时，整体加载时间只取决于时间最长的那个。注意：上面代码中的那个：

yield [];

不要写成：

yield* [];

这两者含义是不同的，后者会顺序执行。

任务的竞争

const { data, timeout } = yield race({
  data: call(service, 'some data'),
  timeout: call(delay, 1000)
});

if (data)
  put({type: 'DATA_RECEIVED', data});
else
  put({type: 'TIMEOUT_ERROR'});

这个例子比较巧妙地用一个延时一秒的空操作来跟一个网络请求竞争，如果到了一秒，请求还没结束，就让它超时。这个类似于Promise.race的作用。

dva中文文档地址：https://dvajs.com/guide/

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。

案例

app.model({
  namespace: 'count',
  state: {
    record: 0,
    current: 0,
  },
  reducers: {
    add(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1};
    },
  },
  effects: {
    *add(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
  },
  subscriptions: {
    keyboardWatcher({ dispatch }) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  },
});

开发复杂SPA

在其中一个的effect里面做select操作，是可以获取另外一个中的state，从而可以共享全局。在一个effect中，可以使用多个put来分别调用reducer来更新状态。

把多个要并行执行的东西放在一个数组里，就可以并行执行，等所有的都结束之后，进入下个环节，类似promise.all的操作。

const [result1, result2]  = yield all([
  call(service1, param1),
  call(service2, param2)
])