五分钟掌握最小知识体系上一篇我介绍了什么是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);//umiconsole.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>classNameclass 是保留词，所以添加样式时，需用 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中)Reducerreducer 是一个函数，接受 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。Subscriptionsubscriptions 是订阅，用于订阅一个数据源，然后根据需要 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稍微熟悉之后，参阅官方文档