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

这似乎是显而易见的,但是我发现自己对于何时使用花括号来导入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括起来,那么下面这行代码会出现下面的错误:

无法读取未定义的属性待办事项

TodoReducer.js

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

类似的错误也发生在我的组件花括号。 我想知道什么时候应该使用花括号来进行单个导入,因为显然,在导入多个组件/模块时,必须将它们放在大括号中,我知道。

编辑

在这里的SOpost没有回答我的问题,而是问我何时应该或不应该使用花括号来导入单个模块,或者我不应该使用花括号来导入ES6中的单个模块(这显然不是案例,因为我已经看到需要单个import花括号)

这是一个默认导入

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

因为它总是会parsing为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 ,并分别命名为myASomething

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

默认导出通常用于通常期望从模块获得的任何内容。 命名的出口往往被用于公用事业,可能是方便的,但并不总是必要的。 但是,您可以select如何导出内容:例如,模块可能根本没有默认导出。

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

TL; DR :如果要导入非默认导出,则使用大括号。

有关更多详细信息,请参阅上面的Dan Abramovs答案。

上面的答案阿布拉莫夫答案解释了默认出口命名出口

使用哪个?

引用David Herman :ECMAScript 6支持单一/默认导出样式,并提供了最好的语法来导入默认值。 导入命名导出可以,甚至应该稍微简洁。

但是在名为export的TypeScript中,由于重构而受到青睐。 例如,如果您默认导出类并重命名它,那么类名将只在该文件中更改,而不会在其他引用中更改,并且在所有引用中将命名的exports类名将被重命名。 命名输出也是实用程序的首选。

无论你喜欢整体使用。

额外

默认导出实际上是名称为default的命名导出,所以默认导出可以导入为:

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

我会说,还有一个值得一提的import ES6关键字的星号。

在这里输入图像描述

如果您尝试控制台日志混合:

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

你会得到:

在这里输入图像描述

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

当您只需要模块中的特定组件时,括号就是黄金,这使得像webpack这样的捆绑软件的占用空间更小。

如果你认为import只是节点模块,对象和解构的语法糖,我觉得它非常直观。

 // bar.js module = {} module.exports = { functionA: () => {}, functionB: ()=> {} } // really all that is is this: var module = { exports: { functionA, functionB } } // then, over in foo.js // the whole exported object: var fump = require('./bar.js') = { functionA, functionB } // or import fump from './bar.js' // same thing, object functionA and functionB props // just one prop of the object var fump = require('./bar.js').functionA // same as this, right? var fump = { functionA, functionB }.functionA // and if we use es6 destructuring: var { functionA } = { functionA, functionB } // we get same result // so, in import syntax: import { functinoA } from './bar.js'