antd pro是一个企业级中后台前端/设计解决方案,完善的UI组件,权限管理,以及最新版本使用umi ui进行区块管理,可以帮助我们快速开发开台,antd pro技术栈主要使用antd+dva+umi,关于dva和umi好多童鞋很陌生,下面让我们看下dva和umi是什么?在学习dva和umi之前,先让我们看下antd pro目录结构是什么样
是不是感觉很熟悉,和vue的目录结构基本差不多。
一、dva介绍
应用官方的介绍就是,dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。
1、dva的特点
- 易学易用:仅有 6 个 api,对 redux 用户尤其友好,配合 umi 使用后更是降低为 0 API
- ele概念:通过 reducers, effects 和 subscriptions 组织 model,简化 redux 和 redux-saga 引入的概念
- 插件机制:比如 dva-loading 可以自动处理 loading 状态,不用一遍遍地写 showLoading 和 hideLoading
2、dva的使用
dva在antd pro中的使用,由于antd pro已配置好dva,我们可以看到在src目录有个models文件夹,那就是dva生活的地方,model包含5个属性:
- namespace:model 的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过
.
的方式创建多层命名空间。 - state:初始值,优先级低于传给
dva()
的opts.initialState。
reducers:
以 key/value 格式定义 reducer。用于处理同步操作,唯一可以修改state
的地方。由action
触发。格式为
(state, action) => newState
或[(state, action) => newState, enhancer]
。-
effects:以 key/value 格式定义 effect。用于处理异步操作和业务逻辑,不直接修改
state
。由action
触发,可以触发action
,可以和服务器交互,可以获取全局state
的数据等等。格式为*(action, effects) => void
或[*(action, effects) => void, { type }]
-
subscriptions:以 key/value 格式定义 subscription。subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在
app.start()
时被执行,数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为({ dispatch, history }, done) => unlistenFunction。
下面让我们看下官方例子:
app.model({
namespace: 'todo',
state: [],
reducers: {
add(state, { payload: todo }) {
// 保存数据到 state
return [...state, todo];
},
},
effects: {
*save({ payload: todo }, { put, call }) {
// 调用 saveTodoToServer,成功后触发 `add` action 保存到 state
yield call(saveTodoToServer, todo);
yield put({ type: 'add', payload: todo });
},
},
subscriptions: {
setup({ history, dispatch }) {
// 监听 history 变化,当进入 `/` 时触发 `load` action
return history.listen(({ pathname }) => {
if (pathname === '/') {
dispatch({ type: 'load' });
}
});
},
},
});
二、umi介绍
umi可插拔的企业级 react 应用框架。
umi的特点
- 插件化:umi 的整个生命周期都是插件化的,甚至其内部实现就是由大量插件组成,比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等,都是由插件实现。
- 开箱即用:你只需一个 umi 依赖就可启动开发,无需安装 react、preact、webpack、react-router、babel、jest 等等
- 约定式路由:类 next.js 的约定式路由,无需再维护一份冗余的路由配置,支持权限、动态路由、嵌套路由等等
其他特点以及umi的使用,架构,官方文档有详细的介绍,这里就不多做解释。
具体配置可参照官方文档:https://umijs.org/zh/config/
路由api:https://umijs.org/zh/api/
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
通过对dva和umi这两个部分的简单了解,相信大家对antd pro也有了一个全新的认识,下面让我们安装一下,体验一下效果如何:
1、yarn create umi or npm create umi;
2、选择 ant-design-pro
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
3、安装依赖 yarn or npm install
4、yarn run start or npm run start