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

Question

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

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

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

类似的错误也发生在我的带有花括号的组件上。我在想什么时候应该对单个导入使用花括号，因为很明显，在导入多个组件/模块时，您必须将它们括在花括号中，这一点我是知道的。

这里的stack ；overflow帖子没有回答我的问题，相反，我在问什么时候应该或不应该使用花括号导入单个模块，或者在ES6中永远不应该使用花括号导入单个模块（显然不是这样，因为我看到过需要使用花括号的单个导入）。

Answer 1

Dan Abramov的回答解释了默认出口和命名出口。

用哪一种？

引用David Herman的话：ECMAScript6支持单一/默认导出样式，并为导入默认提供了最贴心的语法。导入命名导出可以甚至应该稍微不那么简洁。

然而，在TypeScript中，由于重构，名为export更受欢迎。例如，如果默认导出一个类并重命名它，则类名将只在该文件中更改，而在其他引用中不会更改，具有命名导出的类名将在所有引用中重命名。对于实用程序，命名导出也是首选。

总之，你喜欢什么就用什么。

附加

Default导出实际上是一个名称为Default的命名导出，因此Default导出可以导入为：

import {default as Sample} from '../Sample.js';

Answer 2

我认为importES6关键字还有一个带星号的符号值得一提。

如果尝试控制台日志混合：

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

您将获得：

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

当您只需要来自模块的特定组件时，括号是金色的，这使得像WebPack这样的捆绑器占用的空间更小。

Answer 3

这是默认导入：

// 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模块指南，解释了默认导出和命名导出之间的区别。