何时应使用大括号进行 ES6 导入？

javascript import ecmascript-6

2022-08-29 22:08:58

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

文件初始状态.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';

如果我将 in 大括号括起来，则以下代码行会出现以下错误：initialState

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

File TodoReducer.js：

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

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

这里的Stack Overflow帖子没有回答我的问题，相反，我问什么时候应该或不应该使用大括号来导入单个模块，或者我永远不应该使用大括号来导入ES6中的单个模块（显然不是这种情况，因为我已经看到需要大括号的单个导入）。

答案 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'

在这里，我们将默认导出导入为，并分别命名为和命名导出，称为和。AmyASomething

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

答案 2

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

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

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

您将获得：

何时应使用大括号进行 ES6 导入？

当您只需要模块中的特定组件时，支架是金色的，这使得像webpack这样的捆绑器占用空间更小。