1.什么是UmiJS
UmiJS 讀音：（烏米）,官網: https://umijs.org/zh-CN umi是一個可插拔的企業級react應用框架。umi以路由為基礎的，支持類next.js的約定式路由，以及各種進階的路由功能
- umi配以完善的插件體系，覆蓋從源碼到構建產物的每個生命周期
- umi是螞蟻金服的底層前端框架
- umi 可以簡單地理解為 roadhog + 路由，思路類似 next.js/nuxt.js，輔以一套插件機制，目的是通過框架的方式簡化 React 開發
2.UmiJS特點
- 插件化 : umi 的整個生命周期都是插件化的，甚至其內部實現就是由大量插件組成，比如 pwa、按需加載、一鍵切換 preact、一鍵兼容 ie9 等等，都是由插件實現。
- 開箱即用 : 你只需一個 umi 依賴就可啟動開發，無需安裝 react、preact、webpack、react-router、babel、jest等等。
- 約定式路由 : 類 next.js 的約定式路由，無需再維護一份冗余的路由配置，支持權限、動態路由、嵌套路由等等。
3.安裝UmiJS
首先通過npm安裝 tyarn
npm i yarn tyarn -g #-g 是指全局安裝
然后使用tyarn安裝umi
tyarn global add umi
4.快速入門
#通過初始化命令將生成package.json文件，它是 NodeJS 約定的用來存放項目的信息和配置等信息的文件。 tyarn init -y #通過umi命令創建index.js文件 umi g page index #可以看到在pages下創建好了index.js和index.css文件
自動創建出來兩個文件
index.css
index.js
將下面內容拷貝到index.js中
@T //通過@符號進行引用該方法，類似java中的注解 class User { constructor(name, age = 20){ this.name = name; this.age = age; } } function T(target) { //定義一個普通的方法 console.log(target); //target對象為修飾的目標對象，這里是User對象 target.country = "中國"; //為User類添加一個靜態屬性country } console.log(User.country); //打印出country屬性值
啟動命令 umi dev
然后訪問 http://localhost:8000/ 進行查看效果
5.使用umi構建react項目
5.1 安裝環境
新建一個文件夾,作為react工程,然后用vscode打開
輸入命令 tyarn init -y 初始化工程,會多出來一個 package.json文件
然后輸入命令 tyarn add umi --dev 為項目添加umi依賴
5.2 編寫hello world入門程序
在根目錄下新建一個config文件夾,然后創建umi配置文件,config.js,然后寫入以下代碼
//導出一個對象，暫時設置為空對象，后面再填充內容 export default {};
在umi中，約定的目錄結構如下：
項目根目錄下創建src/pages/helloworld.js文件
export default () => { return <div>hello world</div>; }
然后通過命令 umi dev 啟動項目
然后在瀏覽器訪問 http://localhost:8000/helloworld 即可看到輸出 hello world
安裝react插件
#添加插件 tyarn add umi-plugin-react --dev
接下來在config.js中引入插件
export default { plugins: [ ['umi-plugin-react', { //暫時不啟用任何功能 }] ] };
6.構建和部署
現在我們寫的js，必須通過umi先轉碼后才能正常的執行，那么我們最終要發布的項目是普通的html、js、css，通過umi是可以進行轉碼生成文件的，具體操作如下：
umi build
我們可以清楚的看到生成了一個dist文件夾
umi.js文件是一個已經壓縮過的文件,就是將我們寫的js文件進行了轉碼
7.實例演示
新建文件 src/models/ListData.js
export default { namespace: "list", state: { dataList: [1, 2, 3, 4], maxNum: 4, }, reducers: { //定義的一些函數 addNewData: function (state) { //state代表更新之前的狀態數據 let maxNum = state.maxNum + 1; let list = [...state.dataList, maxNum]; return { dataList: list, maxNum: maxNum, }; }, }, };
新建文件 src/pages/List.js
import React from 'react' import { connect } from 'dva' const namespace="list" //說明:第一個回調函數作用:將page層和model層進行連接,返回model中的數據並且將返回的數據綁定到this.props //第二個回調函數,這個函數的作用,將定義的函數綁定到this.props中,調用model層中定義的函數 @connect((state)=>{ return { listData : state[namespace].dataList, maxNum : state[namespace].maxNum } },(dispatch)=>{ //dispatch的作用,可以調用model層調用定義的函數 return { //將返回的函數綁定到this.props add : function(){ dispatch({ //通過dispatch調用model中定義的函數,通過type指定函數名,格式namespace/函數名 type: namespace+"/addNewData" }) } } }) class List extends React.Component{ constructor(){ super() // this.state={ // dataList:[1,2,3,4], // maxNum:4 // } } render(){ return( <div> <ul> { // 遍歷值 this.props.listData.map((value,index) => { return <li key={index}>{value}</li> }) } </ul> <button onClick={this.myClickHandler}>按鈕</button> </div> ) } myClickHandler=()=>{ this.props.add() // let maxNum=this.state.maxNum+1; // let list = [...this.state.dataList,maxNum] // this.setState({ // dataList:list, // maxNum:maxNum // }) } } export default List
修改config.js
//導出一個對象，暫時設置為空對象，后面再填充內容 export default { dva : {} //開啟dva功能 };
流程說明：
1. umi框架啟動，會自動讀取models目錄下model文件，即ListData.js中的數據
2. @connect修飾符的第一個參數，接收一個方法，該方法必須返回{}，將接收到model數據
3. 在全局的數據中，會有很多，所以需要通過namespace進行區分，所以通過state[namespace]進行獲取數據
4. 拿到model數據中的data，也就是[1, 2, 3,4]數據，進行包裹{}后返回
5. 返回的數據，將被封裝到this.props中，所以通過this.props.listData即可獲取到model中的數據