五分鍾掌握最小知識體系
本文閱讀時間大概為5分鍾，但是能讓你了解基於UMI和DVA構建項目的最小知識體系，你可以粗略的瀏覽一下本文所提到的知識，在后續的講解中都會多次重復提起，保證學習效率。
由於現在前端工程化的流行，所以在學習一個新的框架時，可能會面臨一些疑惑。
比如拿react舉例：
es6特性好多啊(es5我都還沒學完呢) component有三種寫法(茴字的四種寫法了解一下) webpack是什么(前端構建工具，然后呢，webpack是什么？) 什么同步異步數據流(我callback都理不清楚) ...
ECMAScript 6
變量聲明
const用於聲明常量，let用於聲明變量，他們都是塊級作用域。
|
1
2
|
const a = 1;
let b = 1;
|
模板字符串
用於拼接字符串
|
1
2
3
4
5
6
|
let a =
"hello"
;
let b =
"world"
;
console.log(
"print:"
+a+b);
let c = `print:${a}${b}`
// 注意這個不是引號，鍵盤esc下面那個按鍵
|
默認參數
|
1
2
3
4
|
function
test(a=
"world"
){
console.log(`print:hello,${a}`);
}
test()//print:hello,world
|
箭頭函數
函數的簡化寫法
|
1
2
3
4
|
function
test(a=
"world"
){
console.log(`print:hello,${a}`);
}
const test = (a=
"world"
)=>{console.log(`print:hello,${a}`);}
|
塊的導入和導出
|
1
2
3
4
5
|
//從antd中導入按鈕
import { Button }
from
'antd'
;
//導出一個方法，這樣就能使用import導入使用了
const test = (a=
"world"
)=>{console.log(`print:hello,${a}`);}
export
default
test
|
析構賦值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const obj = {
key
:
'umi'
,author:
'sorrycc'
};
console.log(obj.
key
);
// 這里相當於把
key
取出來了。
// const
key
= obj.
key
;
const {
key
} = obj;
console.log(
key
);
//反向使用也可以
const obj2 = {
key
};
//數組里面也可以這么用
const arr = [1,2];
const [foo,bar]=arr;
console.log(foo);//1
|
展開運算符
用於數組組裝
|
1
2
|
const arr = [
'umi'
];
const texts = [...arr,
'dva'
];
|
用於取出數組部分屬性
|
1
2
3
4
5
|
const arr = [
'umi'
,
'dva'
,
'antd'
];
const [umi,...other]=arr;
//前面已經提過析構賦值 所以第一項會賦值給umi，剩下的會被組合成一個other數組
console.log(umi);//umi
console.log(other);// (2)[
'dva'
,
'antd'
];
|
用於組合新的對象，注意key相同，會被覆蓋。
|
1
2
3
4
|
const obj = {a:1,b:2};
const obj2 = {b:3,c:4};
const obj3 = {...obj,...obj2}
//{a:1,b:3,c:4}
|
JSX
組件嵌套
類似html
|
1
|
<header><footer> </footer></header></app>
|
className
class 是保留詞，所以添加樣式時，需用 className 代替 class 。
|
1
|
|
Hello Umi
JavaScript 表達式
JavaScript 表達式需要用 {} 括起來，會執行並返回結果。
比如：
|
1
|
|
{ this.props.title }
注釋
盡量別用 // 做單行注釋。
|
1
|
|
{/* multiline comment */} {/* multi line comment */} { // single line } Hello
理解 CSS Modules
其實你可以不必理解CSS Modules，只要知道button class 在構建之后會被重命名為 ProductList_button_1FU0u 。button 是 local name，而 ProductList_button_1FU0u 是 global name 。你可以用簡短的描述性名字，而不需要關心命名沖突問題。
你要做的全部事情就是在樣式文件里寫 .button {...}，並在組件里通過 styles.button 來引用他。
Dva
(model中)
Reducer
reducer 是一個函數，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state。可以理解為更新數據刷新頁面，你可以不需要知道什么reducer的增刪改，像下面這樣寫一個通用方法。
|
1
2
3
4
5
|
reducers:{
save(state, {payload}) {
return
{ ...state,...payload}
},
},
|
Effect
這個可以理解為一個接收事件的中間件，你在這里接受頁面拋過來的事件，然后處理，比如請求服務器數據，然后，再拋個事件到Reducer，更新頁面。
示例：
|
1
2
3
4
5
6
7
|
state:{
assets:{},
},
*changeAssets({ payload }, { call, put,
select
}) {
const data = yield call(doSomethingFunc, parameter);
yield put({ type:
'save'
, payload: { assets:data } });
},
|
|
1
|
const data =yield call(doSomethingFunc, parameter);
|
call方法用於調用邏輯，可以理解為等待這個函數執行的結果，把值賦給data，項目中常用於，返送http請求，等待服務端響應數據。
|
1
|
const data = yield
select
(state => state.namespace);
|
select方法用於查找當前state的狀態，比如此刻data = {assets:{}}
|
1
|
yield put({ type:
'fetch'
, payload: { page } });
|
put方法用於觸發事件，可以是Reducer也可以是Effects。
Subscription
subscriptions 是訂閱，用於訂閱一個數據源，然后根據需要 dispatch 相應的 action。數據源可以是當前的時間、服務器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。格式為 ({ dispatch, history }) => unsubscribe 。
項目中常用於頁面初始化數據的自動請求，如：
|
1
2
3
4
5
6
7
8
9
10
|
setup({ dispatch, history }) {
return
history.listen(({ pathname, query }) => {
if (pathname ===
'/home'
) {
// 進入首頁了，自動做一些什么事情，比如發起一個Effects
dispatch({
type:
'query'
})
}
});
}
|
(model,page和其他)
dispatch
和Effects中的put方法等同，用於不在Effects中要發起事件的情況下，比如從頁面點擊按鈕發起請求。(page中)
connect
通過connect綁定數據,比如：
|
1
2
3
4
5
|
import {
connect
}
from
'dva'
;
import styles
from
'./page.less'
;
function
App({home,dispatch}) {
const { assets } = home;
return
(
|
{JSON.stringfy(assets)}
); } export default connect(({home})=>({home}))(App);
以上內容，幾乎包括了所有我們在實際項目中會使用到的所有知識。
需要強調的是，文中內容僅僅是我為了讓大家便於理解，做了一些簡化描述。
相關概念，大家可以在對umi稍微熟悉之后，參閱官方文檔