ES6 单模块导入中的花括号：何时使用它们，何时不使用？

何时使用大括号进行 ES6 单个模块导入

在 ES6 中，使用大括号导入单个模块可能会引入意外行为。为了阐明何时使用和避免大括号，让我们检查一下默认导出和命名导出之间的区别。

默认导出

当导入不带大括号的单个模块时，您可以本质上是导入默认导出。默认导出声明为：

export default <value>;

在提供的示例中，initialState.js 包含initialState 对象的默认导出。因此，您可以不使用大括号来访问它：

import initialState from './todoInitialState';

Named Export

如果您需要导入特定的导出值，则应该使用大括号。命名导出声明为：

export const <identifier> = <value>;

在 TodoReducer.js 示例中，您尝试访问名为导出的待办事项：

import { todo } from './todoInitialState';

使用大括号与使用大括号避免它们

经验法则是在导入时使用花括号命名导出并在导入默认导出时避免使用它们。以下是总结的细分：

• 使用大括号：

  • 导入特定命名导出时

• 避免卷曲大括号:

  • 从只有一个默认导出的模块导入默认导出时
  • 从一个模块导入多个导出时，无论它们是默认导出还是命名导出导出

示例

考虑以下示例：

// A.js
export default MyComponent;
export const ChildComponent = () => {};

导入这些导出：

• 默认导出（MyComponent）：

  import MyComponent from './A';

• 命名导出(ChildComponent):

  import { ChildComponent } from './A';

通过理解默认导出和命名导出之间的区别，您可以正确确定何时在 ES6 中对单个模块导入使用大括号。

以上是ES6 单模块导入中的花括号：何时使用它们，何时不使用？的详细内容。更多信息请关注PHP中文网其他相关文章！