export default 和 export { default } 的区别

Question

我一直在我的 React 中广泛使用命名导出和默认导出，我遇到了这两种类似的语法。export default from './Button';export { default } from './Button';有人能告诉我他们有什么区别吗？看起来他们正在用以前的 VSCodeGo To Definition函数做同样的事情，而不是在前者上工作。

Answer 1

ES6 允许我们导入一个模块并在其他文件中使用它。严格来说，在 React 术语中，可以通过从各自的模块中导出组件并在其他文件中使用它们来在其他组件中使用无状态组件。

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 2

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

请参阅Javascript 导出以进一步了解。请注意default是关键字。