UMI.js需要了解的知识

栏目: CSS · 发布时间: 5年前

内容简介:上一篇我介绍了什么是UMI和UMI的好处,这篇我会介绍UMI需了解的知识声明:文中知识体系目录来自开源项目:本文阅读时间大概为5分钟,但是能让你了解基于UMI和DVA构建项目的最小知识体系,你可以粗略的浏览一下本文所提到的知识,在后续的讲解中都会多次重复提起,保证学习效率。

五分钟掌握最小知识体系

上一篇我介绍了什么是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稍微熟悉之后,参阅 官方文档


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

构建之法(第二版)

构建之法(第二版)

邹欣 / 人民邮电出版社 / 2015-7 / 59

软件工程牵涉的范围很广, 同时也是一般院校的同学反映比较空洞乏味的课程。 但是软件工程的技术对于投身IT 产业的学生来说是非常重要的。作者邹欣有长达20年的一线软件开发经验,他利用业余时间在数所高校进行了长达6年的软件工程教学实践,总结出了在16周的时间内让同学们通过 “做中学 (Learning By Doing)” 掌握实用的软件工程技术的教学计划,并得到高校师生的积极反馈。在此基础上,作者对......一起来看看 《构建之法(第二版)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具