五分钟掌握最小知识体系
本文阅读时间大概为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
|
|
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稍微熟悉之后，参阅官方文档