利用es6加快我们的开发速度

#1

如果我们的react项目中使用了redux,那都会进行如下操作;

// 在actionType目录下建一个 action.type
export const HELLO_WORLD = 'HELLO_WORLD';

// 在某个action目录下引入这个action.type,并写一个action
import { HELLO_WORLD } from './actionType';
export const sayHelloWorld = () => {
    return {
        type:HELLO_WORLD
    }
}

// 再在准备调用 这个action的地方(比如某组件)引入 sayHelloWorld 这个action
import { sayHelloWorld } from './action';

dispatch(sayHelloWorld());// 噼里啪啦进行操作起来!

这样写没任何问题,关键是,如果项目比较复杂,定义的actionType 会非常多,对应的action也会非常多,如果按照上面那样写的话,很容易让人产生报复社会的赶脚:rage:
下图就是一个很典型的引入actionType的图片:

但是,我们利用ES6的import 的小技巧,把图片的代码简写成一小行:

import * as types from './actionType';

这样我们在使用每个actionType的时候,只需要在前面加个types.即可:smiling_imp:。比如我们要引用图片里面的第一个“HOMEWORK_READ_REQUEST”,就可以写成

types.HOMEWORK_READ_REQUEST

同理,引用action的地方可以写成:

import * as actions from './action';

这样写完是不是感觉浑身舒坦!!:blush::blush:
提高不少我们的开发速度,更加专注于业务逻辑!

更加详细的文档,可以参考 阮一峰 ES6 入门

1 Like
#2

只引用的和引用全部,是否会影响打包的大小?

#3

在不强烈反对的情况下,找一个你认为爽的姿势做吧!