一尘不染

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

javascript

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

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

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

import React, Component, PropTypes from 'react';

阅读 199

收藏
2020-04-25

共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)foobar插入当前作用域。请注意,foomyModule.foo相同,并且barmyModule.bar

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

导入默认模块导出和一些明确命名的导出。这会将MyModulefoobar插入当前范围。 出口名称foobar不是
访问的通过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';
2020-04-25