这似乎是显而易见的,但我发现自己有点困惑,什么时候使用花括号导入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中使用花括号来导入单个模块(这显然不是情况,因为我看到过需要花括号的单个导入)。


当前回答

通常当你导出一个函数时,你需要使用{}。

如果你有

export const x

你使用

import {x} from ''

如果你使用

export default const x

你需要使用

import x from ''

这里你可以把X换成任何你想要的变量。

其他回答

这是一个默认的导入:

// 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

一个模块只能有一个默认导出,但可以有任意多个命名导出(0个、1个、2个或多个)。你可以把它们一起导入:

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

对于默认导出,我们在导入时不使用{}。

例如,

文件player.js

export default vx;

文件index.js

import vx from './player';

文件index.js

文件player.js

如果我们想导入我们导出的所有东西,那么我们使用*:

花括号({})用于导入命名绑定,其背后的概念是解构赋值

关于import语句如何工作的简单演示可以在我自己对类似问题的回答中找到,在javascript导入中何时使用“{}”?

Dan Abramov的回答解释了默认输出和指定输出。

用哪一种?

引用大卫·赫尔曼的话:

ECMAScript 6支持单一/默认导出样式,并为导入默认提供了最温馨的语法。导入命名的导出可以甚至应该稍微不那么简洁。

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

总的来说,你喜欢什么就用什么。

额外的

默认导出实际上是一个名称为Default的命名导出,因此默认导出可以导入为:

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

我想说的是,import ES6关键字也有一个星号符号值得一提。

如果你尝试控制台日志Mix:

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

你会得到:

什么时候我应该用大括号导入ES6 ?

当您只需要模块中的特定组件时,括号是黄金,这为webpack等捆绑器节省了更小的占用空间。