对umi的研究

什么是Umi.js?

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。你可以将它简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

为什么使用Umi.js?

我们做react开发的时候会不会遇到以下问题？：
1.项目做大的时候，开发调试的启动和热更新时间会变得很长。
2.大应用下，网站打开很慢，有没有办法基于路由做到按需加载。
3.dva的model每次都要手写载入，能否一开始就同项目初始化好？

使用乌米，即可解决以上问题，并且还能提供如下优势：

• 开箱即用，内置 react、react-router 等
• 类 next.js 且功能完备的路由约定，同时支持配置的路由方式
• 完善的插件体系，覆盖从源码到构建产物的每个生命周期
• 一键兼容到 IE9
• 完善的 TypeScript 支持
• 与 dva 数据流的深入融合

起步Umi

node环境安装

在官网下载与系统相应的node版本，node.js版本>=8.10

安装Umi

npm install -g umi

推荐使用 yarn 代替 npm 来安装 umi ， yarn 会针对部分场景做一些缓存以节省时间，你可以输入以下命令来全局安装 yarn，使用yarn后项目中尽量避免再使用npm，不然可能会发生意想不到的错误。

# 使用yarn安装umi yarn global add umi

Umi快速上手

先找个地方建个空目录myapp

# 新建应用 $ mkdir myapp && cd myapp # 新建页面 $ umi generate page index # 本地开发 $ umi dev # 构建上线 $ umi build

 

项目工程结构

public // 公共文件 可以放一些第三方字体 样式库等 mock // mock文件 src |-- components // 公共组件目录 当业务需要拆分组件的时候，可以在对应的业务文件夹下单独创建一个components文件夹 |-- layouts // 项目结构文件 |-- locales // 规划文件 |-- models // 公共model存放位置 |-- public.js // 公共model文件 可以多个 |-- services // 公共api存放 |-- pages // 容器组件 |-- demo-umi // 业务容器 相对路由/demo ***不可以有任何大写字母 |-- index.js // 业务入口 入口文件只识别index.js 后缀必须是js |-- index.less // 业务样式 |-- modules // 业务model目录 |-- demo-m.js // 业务model文件 可以有多个 自动加载 |-- service // 业务api目录 |-- demo-s.js // 业务api文件 可以有多个 |-- utils // 工具 |-- theme |-- cofnig.js // 覆盖antd样式文件 |-- vars.less // 全局变量 |-- global.less // 公共样式 覆盖样式 .eslintignore // eslint过滤文件清单 .eslintrc.js // eslint配置 .gitignore package.json README.md 

约定式路由

启动 umi dev 后，大家会发现 pages 下多了个 .umi 的目录请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件，约定 pages 下所有的 (j|t)sx? 文件即路由

使用dva

在 umi 项目中，你可以使用 dva 来处理数据流，以响应一些复杂的交互操作。
在 umi@^2 中要使用 dva 的功能很简单，只要使用 umi-plugin-react 插件并配置 dva:true 即可。
修改配置的文件：./umirc.js

// ref: https://umijs.org/config/ export default { plugins: [ // ref: https://umijs.org/plugin/umi-plugin-react.html ['umi-plugin-react', { antd: true, dva: true, // 在此处启用 dva dynamicImport: false, title: 'hero', dll: false, routes: { exclude: [], }, hardSource: false, }], ], }

在dva中，处理数据流的文件统一放在 models 文件夹下，每一个文件默认导出一个对象，里面包含数据和处理数据的方法，通常我们称之为 model 。如以下count.js，model结构一般是如此：

./src/models/count.js

export default { namespace: 'count', // 默认与文件名相同 state: 'count', subscriptions: { setup({ dispatch, history }) { }, }, reducers: { update(state) { return `${state}_count`; }, }, effects: { *fetch({ type, payload }, { put, call, select }) { }, }, }

关于reducers,effects,subscriptions的详细介绍，可参考dva.js官方文档

在项目页面中使用model

我们需要导入connect将页面和model绑定在一起。

 

import { connect } from 'dva'; function CountPage(props) { //从props属性中打印namespace为count的model的state数据 console.log(props.count); return ( <div className={styles.normal}> <h1>数量大小</h1> <h2>This is {props.count}</h2> </div> ); } export default connect(({ count }) => ({ count }))(CountPage); 

 

如果使用es7的装饰器，我们可以改成这样的写法：

 

import { connect } from 'dva'; // 装饰器 @connect(({ count }) => ({ count })) function CountPage(props) { //从props属性中打印namespace为count的model的state数据 console.log(props.count); return ( <div className={styles.normal}> <h1>数量大小</h1> <h2>This is {props.count}</h2> </div> ); } export default CountPage；