UMI.js开发知识总结
五分钟掌握最小知识体系
本文阅读时间大概为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稍微熟悉之后,参阅官方文档
UMI.js开发知识总结的更多相关文章
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- 微信应用号开发知识贮备之Webpack实战
天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生.作为行业内人士,我们很应该去拥抱这个趋势.这段时间在忙完工作之余准备储备一下这方面的知识点,以免将来被微信应用号的浪潮所淹没 ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- iKcamp新书上市《Koa与Node.js开发实战》
内容摘要 Node.js 10已经进入LTS时代!其应用场景已经从脚手架.辅助前端开发(如SSR.PWA等)扩展到API中间层.代理层及专业的后端开发.Node.js在企业Web开发领域也日渐成熟,无 ...
- js开发:数组的push()、pop()、shift()和unshift()(转)
js开发:数组的push().pop().shift()和unshift() 2017-05-18 11:49 1534人阅读 评论(0) 收藏 举报 分类: javascript开发(22) 版 ...
- 腾讯高级工程师带你完整体验Node.js开发实战
Node.js拥有广大的 JavaScript程序员基础并且完全开源,它被广泛地用在 Web服务.开发工作流.客户端应用等诸多领域.在 Web 服务开发这个领域,业界对 Node.js 的接受程度最高 ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...
随机推荐
- 【408】C函数中的ADT
类似类的形式 boardADT.h:所有的宏.声明等部分写在这里 boardADT.c:只需要 #inclue "boardADT.h",不需要 include 其他系统头文件,然 ...
- kubenetes创建一个pod应用
Pod是可以创建和管理Kubernetes计算的最小可部署单元.一个Pod代表着集群中运行的一个进程.每个pod都有一个唯一的ip. 一个pod类似一个豌豆荚,包含一个或多个容器(通常是docker) ...
- LeetCode_53. Maximum Subarray
53. Maximum Subarray Easy Given an integer array nums, find the contiguous subarray (containing at l ...
- java cpu 使用率100%
--宝典开始 top :查看 进程 ,选CPU使用率高的 获取进程ID,pid top -Hp pid:查看线程,选CPU使用率高的 获取线程ID,threadid printf "%X\n ...
- 国内强大的API接口文档写作网站showdoc
传送门:https://www.showdoc.cc/ 思思今天使用了一下,真是非常方便,瞬间爱上呀,哈哈. 赶紧去试试吧...
- 【Leetcode_easy】690. Employee Importance
problem 690. Employee Importance 题意:所有下属和自己的重要度之和,所有下属包括下属的下属即直接下属和间接下属. solution:DFS; /* // Employe ...
- ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法
这个是非常常用的案例,ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法/** * 单文件上传 * name:表单上传文件的名字 * ext: 文件允许的后缀,字符串形式 * path:文件保 ...
- jsp标签在spring boot中的关键用法
<form:form modelAttribute="user" action="save" method="post" >// ...
- hupu面试
1.mybatis更新一条数据时,如果某字段为空,则不更新它,使用默认值? <update id="updateProduct" parameterType="Pr ...
- linux破解navicat for mysql
第一次执行start_navicat时,会在用户主目录下生成一个名为.navicat64的隐藏文件夹. cd ~/.navicat64 此文件夹下有一个system.reg文件 rm system.r ...