什么时候应该使用花括号进行 ES6 导入？

Question

这似乎很明显，但我发现自己对何时使用花括号在 ES6 中导入单个模块感到有些困惑。例如，在我正在处理的 React-Native 项目中，我有以下文件及其内容：

文件 initialState.js

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

在 TodoReducer.js 中，我必须在没有花括号的情况下导入它：

import initialState from './todoInitialState';

如果我将 initialState 括在花括号中，则会收到以下代码行的以下错误：

无法读取未定义的属性 todo

文件 TodoReducer.js ：

export default function todos(state = initialState.todo, action) {
    // ...
}

我的带有花括号的组件也会发生类似的错误。我想知道何时应该对单个导入使用大括号，因为显然，在导入多个组件/模块时，您必须将它们括在大括号中，我知道。

此处 的 Stack Overflow 帖子没有回答我的问题，而是我问我 何时 应该或不应该使用花括号来导入 单个 模块，或者我不应该使用花括号来导入 ES6 中的单个模块（这显然不是这种情况，因为我已经看到需要花括号的单个导入）。

原文由 TonyGW 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是 默认导入：

 // B.js
 import A from './A'

仅当 A 具有 默认导出 时才有效：

 // A.js
 export default 42

在这种情况下，导入时分配给它的名称并不重要：

 // B.js
 import A from './A'
 import MyA from './A'
 import Something from './A'

因为它总是会解析为 A 的 默认导出。

---

这是一个 名为 A 的命名导入：

 import { A } from './A'

它仅在 A 包含 名为 A 的命名导出 时才有效：

 export const A = 42

在这种情况下，名称很重要，因为您 通过其导出名称导入特定事物：

 // B.js
 import { A } from './A'
 import { myA } from './A' // Doesn't work!
 import { Something } from './A' // Doesn't work!

为了使这些工作，您将向 A 添加 相应的命名导出：

 // A.js
 export const A = 42
 export const myA = 43
 export const Something = 44

---

一个模块只能有 一个默认导出，但可以有任意数量 的命名导出（零个、一个、两个或多个）。您可以将它们全部导入：

 // B.js
 import A, { myA, Something } from './A'

在这里，我们将默认导出导入为 A ，并分别命名为 myA 和 Something 的导出。

 // A.js
 export default 42
 export const myA = 43
 export const Something = 44

我们还可以在导入时为它们分配所有不同的名称：

 // B.js
 import X, { myA as myX, Something as XSomething } from './A'

---

默认导出往往用于您通常希望从模块中获得的任何内容。命名的导出往往用于可能很方便但并不总是必需的实用程序。但是，您可以选择如何导出内容：例如，一个模块可能根本没有默认导出。

这是一个很好的 ES 模块指南，解释了默认导出和命名导出之间的区别。

原文由 Dan Abramov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我想说 import ES6 关键字也有一个星号表示值得一提。

如果您尝试控制台日志 Mix：

 import * as Mix from "./A";
console.log(Mix);

你会得到：

什么时候应该使用花括号导入 ES6？

当你只需要模块中的特定组件时，括号是金色的，这使得像 webpack 这样的打包器占用空间更小。

原文由 prosti 发布，翻译遵循 CC BY-SA 4.0 许可协议