乐趣区

UMI.js需要了解的知识

五分钟掌握最小知识体系
上一篇我介绍了什么是 UMI 和 UMI 的好处,这篇我会介绍 UMI 需了解的知识声明:文中知识体系目录来自开源项目:dva.js 知识导图本文阅读时间大概为 5 分钟,但是能让你了解基于 UMI 和 DVA 构建项目的最小知识体系,你可以粗略的浏览一下本文所提到的知识,在后续的讲解中都会多次重复提起,保证学习效率。由于现在前端工程化的流行,所以在学习一个新的框架时,可能会面临一些疑惑。
比如拿 react 举例:

es6 特性好多啊 (es5 我都还没学完呢)
component 有三种写法 (茴字的四种写法了解一下)
webpack 是什么 (前端构建工具,然后呢,webpack 是什么?)
什么同步异步数据流 (我 callback 都理不清楚)

ECMAScript 6
变量声明
const 用于声明常量,let 用于声明变量,他们都是块级作用域。
const a = 1;
let b = 1;
模板字符串
用于拼接字符串
let a = “hello”;
let b = “world”;
console.log(“print:”+a+b);

let c = `print:${a}${b}`
// 注意这个不是引号,键盘 esc 下面那个按键
默认参数
function test(a=”world”){
console.log(`print:hello,${a}`);
}
test()//print:hello,world
箭头函数
函数的简化写法
function test(a=”world”){
console.log(`print:hello,${a}`);
}
const test = (a=”world”)=>{console.log(`print:hello,${a}`);}
块的导入和导出
// 从 antd 中导入按钮
import {Button} from ‘antd’;
// 导出一个方法,这样就能使用 import 导入使用了
const test = (a=”world”)=>{console.log(`print:hello,${a}`);}
export default test
析构赋值

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
展开运算符
用于数组组装
const arr = [‘umi’];
const texts = […arr,’dva’];
用于取出数组部分属性
const arr = [‘umi’,’dva’,’antd’];
const [umi,…other]=arr;
// 前面已经提过析构赋值 所以第一项会赋值给 umi,剩下的会被组合成一个 other 数组
console.log(umi);//umi
console.log(other);// (2)[‘dva’,’antd’];
用于组合新的对象,注意 key 相同,会被覆盖。
const obj = {a:1,b:2};
const obj2 = {b:3,c:4};
const obj3 = {…obj,…obj2}
//{a:1,b:3,c:4}
JSX
组件嵌套
类似 html
<app>
<Header />
<Footer />
</app>
className
class 是保留词,所以添加样式时,需用 className 代替 class。
<h1 className=”fancy”>Hello Umi</h1>
JavaScript 表达式
JavaScript 表达式需要用 {} 括起来,会执行并返回结果。比如:
<h1>{this.props.title}</h1>
注释
尽量别用 // 做单行注释。
<h1>
{/* multiline comment */}
{/*
multi
line
comment
*/}
{
// single line
}
Hello
</h1>
理解 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 的增删改,像下面这样写一个通用方法。
reducers:{
save(state, {payload}) {
return {…state,…payload}
},
},
Effect
这个可以理解为一个接收事件的中间件,你在这里接受页面抛过来的事件,然后处理,比如请求服务器数据,然后,再抛个事件到 Reducer,更新页面。示例:
state:{
assets:{},
},
*changeAssets({payload}, {call, put, select}) {
const data = yield call(doSomethingFunc, parameter);
yield put({type: ‘save’, payload: { assets:data} });
},
const data =yield call(doSomethingFunc, parameter);
call 方法用于调用逻辑,可以理解为等待这个函数执行的结果,把值赋给 data,项目中常用于,返送 http 请求,等待服务端响应数据。
const data = yield select(state => state.namespace);

select 方法用于查找当前 state 的状态,比如此刻 data = {assets:{}}
yield put({type: ‘fetch’, payload: { page} });

put 方法用于触发事件,可以是 Reducer 也可以是 Effects。
Subscription
subscriptions 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为 ({dispatch, history}) => unsubscribe。项目中常用于页面初始化数据的自动请求,如:
setup({dispatch, history}) {
return history.listen(({pathname, query}) => {
if (pathname === ‘/home’) {
// 进入首页了,自动做一些什么事情,比如发起一个 Effects
dispatch({
type: ‘query’
})
}
});
}

(model,page 和其他)
dispatch
和 Effects 中的 put 方法等同,用于不在 Effects 中要发起事件的情况下,比如从页面点击按钮发起请求。(page 中)
connect
通过 connect 绑定数据, 比如:
import {connect} from ‘dva’;
import styles from ‘./page.less’;
function App({home,dispatch}) {
const {assets} = home;
return (
<div className={styles.normal}>
<h2>
{JSON.stringfy(assets)}
</h2>
</div>
);
}
export default connect(({home})=>({home}))(App);

以上内容,几乎包括了所有我们在实际项目中会使用到的所有知识。需要强调的是,文中内容仅仅是我为了让大家便于理解,做了一些简化描述。相关概念,大家可以在对 umi 稍微熟悉之后,参阅官方文档

退出移动版