Question

在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';

没有导出默认值

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

//------ main2.js ------
import {App} from 'MyClass';

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

Answer 1

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

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

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

...a lot more code

export default {
   massiveExpensiveFunction,
   filterObjects
}

您现在可以选择：

import Util from './Util';

将加载所有代码，包括hugeExpensiveFunction或：

import { filterObjects } from './Util';

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

Answer 2

嗯它与特别的反应没有任何关系，但它只是更容易和简单：

div

而不是：

import Foo from 'bar'

当您只从import { Foo } from 'bar'模块中导出一件事时。

老实说做任何适合你的事情，但它在javascript社区中几乎是一个标准而且被广泛使用

举个例子：airbnb的eslint规范：https://github.com/airbnb/javascript#modules--prefer-default-export

Answer 3

export Foo ...;

导入时，需要您：

使用{}语法和
使用确切的名称Foo：

import {Foo} from ...;

如果您希望以其他名称导入，则甚至需要：

import {Foo as Bar} from ...;

但是，使用默认导出：

export default ...;

您可以跳过{}（是的，只有两个字符......）和
您可以直接以您希望的任何名称导入它：

import Bar from ...;

它不是 ginormous 的区别，但是如果模块中只有一个可导入的代码，它可以使代码更简单，从而更具可读性，在Javascript中是典型的。

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

3 个答案: