ReactJS中默认导出的重要性是什么

rrm*_*ugu 2 ecmascript-6 reactjs

http://2ality.com/2014/09/es6-modules-final.html#default-exports-one-per-module中,说明了默认导出:

仅导出单个值的模块在Node.js社区中非常流行.但它们在前端开发中也很常见,你经常有模型的构造函数/类,每个模块有一个模型.ECMAScript 6模块可以选择默认导出,这是最重要的导出值.默认导出特别容易导入.

我的问题:是否default export只是一个懒惰的编码风格,使进口容易吗?或者它有其他重要性.我不是来自NodeJS社区,我是一个pythoner,所以试图理解导出默认方法以轻松导入它的需要.

编辑:

例:

出口默认

//------ MyClass.js ------
export default class { ... };

//------ main2.js ------
import MyClass from 'MyClass';
Run Code Online (Sandbox Code Playgroud)

没有出口默认

//------ MyClass.js ------
export App class { ... };

//------ main2.js ------
import {App} from 'MyClass';
Run Code Online (Sandbox Code Playgroud)

在上面的例子中,我看到的只是避免导出默认的花括号?除此之外还有什么吗?

Rob*_* M. 6

当你考虑到树木抖动和更大,更复杂的模块时,它可以而且会有所作为.假设您创建了一个巨大的util库:

export function filterObjects(array, predicate) {
   // code
}

export function massiveExpensiveFunction(args) {
   // lots of code
}

...a lot more code

export default {
   massiveExpensiveFunction,
   filterObjects
}
Run Code Online (Sandbox Code Playgroud)

您现在可以选择:

import Util from './Util';
Run Code Online (Sandbox Code Playgroud)

这将加载所有代码,包括您的hugeExpensiveFunction,或:

import { filterObjects } from './Util';
Run Code Online (Sandbox Code Playgroud)

给定正确的模块构建系统支持树抖动,只会导入代码的已使用部分.这可以通过消除未使用/不必要的代码来减少整体构建大小.

  • 即使您导入所有内容,也有一些工具可以决定最终包中包含的内容.你仍然可以使用`import {*as Util}来导入,所以我不认为这是最重要的用例. (3认同)