0.1 引用
0.1.1 react官网
0.1.2?dva官网
0.1.3?antd-mobile官网
0.1.4?umijs官网
0.1.5?转载文章-umi操作手册
一、what are these?
1.1 react.js
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
1.2 dva
dva 首先是一个基于?redux?和?redux-saga?的数据流方案，然后为了简化开发体验，dva 还额外内置了?react-router?和?fetch，所以也可以理解为一个轻量级的应用框架。
特性
易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
elm 概念，通过 reducers, effects 和 subscriptions 组织 model
插件机制，比如?dva-loading?可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
支持 HMR，基于?babel-plugin-dva-hmr?实现 components、routes 和 models 的 HMR
1.3 Ant Design Mobile
一个基于 Preact / React / React Native 的 UI 组件库
1.4 umi
umi是一个基于路由的框架，它支持类似于next.js的常规路由和各种高级路由功能，例如路由级按需加载。借助涵盖从源代码到构建产品的每个生命周期的完整插件系统，umi能够支持各种功能扩展和业务需求。目前，umi在社区和公司内部都有近50多个插件。
umi是Ant Financial的基本前端框架，已直接或间接为600多个应用程序提供服务，包括Java，节点，移动应用程序，混合应用程序，纯前端资产应用程序，CMS应用程序等。umi为我们的内部用户提供了很好的服务，我们希望它也可以为外部用户提供很好的服务。
功能
???开箱即用，具有对react，react-router等的内置支持。
??Next.js?之类的功能齐全的路由约定，并且还支持配置的路由
???完整的插件系统，涵盖从源代码到生产的每个生命周期
performance?高性能，通过插件支持PWA，路由级代码拆分等
for?支持静态导出，适应各种环境，例如控制台应用程序，移动应用程序，egg，支付宝钱包等
???快速开发的启动，支持支持DLL与配置
???与IE9兼容，基于UMI-插件，polyfills
???支持TypeScript，包括d.ts定义和umi test
???与深度集成DVA，支持鸭子目录，模型的自动加载，代码分裂等
单纯的react.js或dva创建项目流程
二、项目创建流程（umi）
（项目使用umi创建 直接看到2.4即可 其余为记录独立创建方式）
2.1 react
全局安装：
$ npm install -g?create-react-app
定位到工作目录下，创建项目：
$ create-react-app projectName
2.2 dva
安装dva-cli
$ npm install dva-cli -g
新建项目：
$ dva new projectName
cd进入项目目录后启动项目
$ npm start
2.3 基于react引入antd
按需加载
$ npm install react-app-rewired customize-cra --save-dev
2.4 umi
全局安装umi
$ yarn global add umi
首先，yarn create umi在新目录中使用。
$ mkdir myapp && cd myapp
$ yarn create umi
选择project。
确认是否要使用TypeScript。
? Do you want to use typescript?(y/N)
然后，选择所需的功能，并检出plugin / umi-plugin-react以获得详细说明。
然后手动安装依赖项，
$ yarn
最后，使用启动本地开发服务器yarn start。
$ yarn start
三、umi项目架构与tips
3.1项目架构
3.2 umi路由约定
3.2.1 基础路由
约定 pages 下所有的?js、jsx、ts?和?tsx?文件即路由,umi 会自动生成路由。
3.2.2 动态路由
umi 里约定，带?$?前缀的目录或文件为动态路由。
3.2.3 可选的动态路由
umi 里约定动态路由如果带?$?后缀，则为可选动态路由。
3.2.4 嵌套路由
umi 里约定目录下有?_layout.js?时会生成嵌套路由，以?_layout.js?为该目录的 layout 。
3.2.5 404 路由
约定?pages/404.js?为 404 页面，需返回 React 组件。
3.3?UMI通用母版页约定
3.3.1 全局 layout
约定?src/layouts/index.js?为全局路由，返回一个 React 组件，通过?props.children?渲染子组件。
export default function(props) {
return(
? ? <>
? ? ? <Header />
? ? ? { props.children }
? ? ? <Footer />
? ? </>
? );
}
3.3.2 不同的全局 layout
你可能需要针对不同路由输出不同的全局 layout，umi 不支持这样的配置，但你仍可以在?layouts/index.js?对 location.path 做区分，渲染不同的 layout 。
比如想要针对 /login 输出简单布局
export default function(props) {
if(props.location.pathname ==='/login') {
return{ props.children }
? }
return(
? ? <>
? ? ? <Header />
? ? ? { props.children }
? ? ? <Footer />
? ? </>
? );
}
3.4?UMI-dva-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 为?pages/a/b.js，他的 page model 为?pages/a/b/models/**/*.js?+?pages/a/models/**/*.js，依次类推
约定 model.js 为单文件 model，解决只有一个 model 时不需要建 models 目录的问题，有 model.js 则不去找?models/**/*.js
3.5?UMI操作相关
3.5.1 页面跳转
// 声明式
import Link from 'umi/link';
export default () => (
? ? ? <Link to="/list">Go to list page</Link>
);
// 命令式
import router from 'umi/router';
function goToListPage() {
? ? ? router.push('/list');
}
3.5.2? 端口配置 .env文件
BROWSER=none
ESLINT=1
PORT=8001
3.6 Tips
src/global.css?此文件不走 css modules，且会自动被引入，可以在这里写全局样式，以及做样式覆盖。
