使用带有javascript导入语法的方括号

Question

我遇到了一个使用以下语法导入库的javascript库：

import React, { Component, PropTypes } from 'react';

上面的方法和下面的方法有什么区别？

import React, Component, PropTypes from 'react';

Answer 1

import React, { Component, PropTypes } from 'react';

这说：

从名称下导入 默认* 导出，并以相同的名称导入 命名的 导出。'react'``React

*Component``PropTypes

这结合了您可能已经看到的两种常见语法

import React from 'react';
import { Component, PropTypes } from 'react';

第一个用于导入和命名默认导出，第二个用于导入指定的命名导出。

通常，大多数模块将提供单个默认导出或命名导出列表。模块同时提供默认导出 和
命名导出的情况要少一些。但是，如果存在一个最常导入的功能，但又包含其他子功能，则将第一个导出为默认值，将其余的导出为命名导出是有效的设计。在这种情况下，您将使用所import引用的语法。

其他答案介于错误和令人困惑之间，可能是因为在提出此问题时的MDN文档是错误和令人困惑的。MDN显示了示例

import name from "module-name";

并称为name“将接收导入值的对象的名称”。但这是误导和不正确的。首先，只有 一个
导入值，它将被“接收”（为什么不只是说“分配给”或“用于引用”）name，在这种情况下，导入值是模块的 默认导出 。

解释此问题的另一种方法是，请注意上述导入与

import { default as name } from "module-name";

OP的示例与

import { default as React, Component, PropTypes } from 'react';

MDN文档继续显示示例

import MyModule, {foo, bar} from "my-module.js";

并声称这意味着

导入整个模块的内容，其中一些内容也被明确命名。这会将myModule（sic）foo和bar插入当前作用域。请注意，foo和myModule.foo相同，并且bar和myModule.bar

MDN在此处所说的内容以及其他答案基于不正确的MDN文档所声称的观点绝对是错误的，并且可能基于规范的早期版本。这实际上是

导入默认模块导出和一些明确命名的导出。这会将MyModule，foo和bar插入当前范围。 出口名称foo和bar是 不是
访问的通过MyModule，这是 默认的 出口，而不是一些伞覆盖全部出口。

（默认的模块导出是使用export default语法导出的值，也可以是export {foo as default}。）

MDN文档编写者可能已经将以下表单弄糊涂了：

import * as MyModule from 'my-module';

这将进口所有的出口产品my- module，并以诸如之类的名称进行访问MyModule.name。默认导出也可以通过以下方式访问MyModule.default，因为默认导出实际上只不过是另一个具有名称的命名导出default。用这种语法，虽然只有一个可以导出默认的导出，但是没有方法可以导入默认导出的一个子集，如果有默认导出，则可以导入所有默认导出。

import myModuleDefault, * as myModule from 'my-module';