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，所以也可以理解為一個輕量級的應用框架。
一般來說，可以分為主要的三個部分，models、services 和 views。其中，views負責頁面上的展示，這個不做贅述；services里面主要寫一些請求后台接口的方法；models是其中最重要的概念，這里存放了各種數據，並對數據進行相應的交互。
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，且會自動被引入，可以在這里寫全局樣式，以及做樣式覆蓋。
關注本人技術公眾號，一起學習新技術哦。
