五分钟掌握最小知识体系
本文阅读时间大概为5分钟,但是能让你了解基于UMI和DVA构建项目的最小知识体系,你可以粗略的浏览一下本文所提到的知识,在后续的讲解中都会多次重复提起,保证学习效率。
由于现在前端工程化的流行,所以在学习一个新的框架时,可能会面临一些疑惑。
比如拿react举例:
es6特性好多啊(es5我都还没学完呢) component有三种写法(茴字的四种写法了解一下) webpack是什么(前端构建工具,然后呢,webpack是什么?) 什么同步异步数据流(我callback都理不清楚) ...
ECMAScript 6
变量声明
const用于声明常量,let用于声明变量,他们都是块级作用域。
模板字符串
用于拼接字符串
默认参数
箭头函数
函数的简化写法
块的导入和导出
析构赋值
展开运算符
用于数组组装
用于取出数组部分属性
用于组合新的对象,注意key相同,会被覆盖。
JSX
组件嵌套
类似html
className
class 是保留词,所以添加样式时,需用 className 代替 class 。
Hello Umi
JavaScript 表达式
JavaScript 表达式需要用 {} 括起来,会执行并返回结果。
比如:
{ this.props.title }
注释
尽量别用 // 做单行注释。
{/* 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的增删改,像下面这样写一个通用方法。
Effect
这个可以理解为一个接收事件的中间件,你在这里接受页面抛过来的事件,然后处理,比如请求服务器数据,然后,再抛个事件到Reducer,更新页面。
示例:
call方法用于调用逻辑,可以理解为等待这个函数执行的结果,把值赋给data,项目中常用于,返送http请求,等待服务端响应数据。
select方法用于查找当前state的状态,比如此刻data = {assets:{}}
put方法用于触发事件,可以是Reducer也可以是Effects。
Subscription
subscriptions 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为 ({ dispatch, history }) => unsubscribe 。
项目中常用于页面初始化数据的自动请求,如:
(model,page和其他)
dispatch
和Effects中的put方法等同,用于不在Effects中要发起事件的情况下,比如从页面点击按钮发起请求。(page中)
connect
通过connect绑定数据,比如:
{JSON.stringfy(assets)}
); } export default connect(({home})=>({home}))(App);
以上内容,几乎包括了所有我们在实际项目中会使用到的所有知识。
需要强调的是,文中内容仅仅是我为了让大家便于理解,做了一些简化描述。
相关概念,大家可以在对umi稍微熟悉之后,参阅官方文档