导出默认和导出{默认}之间的差异

Question

在我的反应中，我广泛地使用了命名导出和默认导出，并遇到了这两个类似的语法。

export default from './Button';

export { default } from './Button';

谁能告诉我他们有什么区别吗？似乎他们对以前的VSCode Go To Definition函数做了同样的事情，而不是在前者上工作。

Answer 1

的区别是什么？

两者之间有很大的不同，一个是标准的ES6，另一个是提议。

// Standard ES6
export { default } from './Button';

这是标准的ES6:它从当前模块导出默认的Button (不改变当前模块的本地范围)

// A Proposal
export default from './Button';

这是一个建议，这解释了为什么它在vscode上不能工作--这里是提议https://github.com/tc39/proposal-export-default-from (仍然是第1阶段)。

基本上，根据建议，两者的工作原理完全相同，提案只是另一种更优雅的编写方法--这样它就可以与我们在Standarad ES6中导出默认的方式相匹配。

如果你想知道为什么提案的作者把它写成https://github.com/tc39/proposal-export-default-from#common-concerns，请看这里

为什么他们都在工作

现在经常使用的JavaScript不再仅仅是一种解释语言。它更像是一个被转移的langauge，在这里我们写的东西(虽然是用JavaScript或类似的东西)仍然与我们发送的JS引擎不一样。

现在它适用于您(在您的代码中)，因为您的构建系统的一部分是使用此建议编写的代码，并将其转换为标准化的ES6。如果我们要讨论Babel这个最流行的JS转换程序，这个语法是通过下面的插件https://babeljs.io/docs/en/next/babel-plugin-proposal-export-default-from.html启用的。

我应该继续使用提案吗？

最好不是，这是在第一州的提议，即使巴贝尔-或任何其他转发器-使它工作，有一个机会，它永远无法达到标准的JavaScript。如果发生这种情况，将来会有一个时间，你将不得不重写这段代码。

Answer 2

ES6为我们提供了导入模块并在其他文件中使用它的功能。严格地说，在其他组件中可以使用无状态组件，方法是从它们各自的模块导出组件，并在其他文件中使用它们。

ES6提供了从文件导出模块的两种方法:命名导出和默认导出。

名为的导出：(导出)

使用命名导出，每个文件可以有多个命名导出。然后导入它们希望被大括号包围的特定出口。导入模块的名称必须与导出模块的名称相同。

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

将所有命名导出导入到一个对象：

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2
here

默认导出：(导出默认)

每个文件只能有一个默认导出。当我们导入时，我们必须指定一个名称并导入如下：

// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;

Answer 3

对于一个文件的多个导出，您应该使用Named exports，您可以使用{}导入它。如果只有一个导出，理想情况下您应该使用Default export。

请参考Javascript出口进一步了解。请注意，default是关键字。