Javascript 导入默认导出和命名导出是否会加载模块两次？

以以下形式编写导入语句时会发生什么情况：

import React, { Component } from 'react';

导入模块的解构是否与解构对象以实现

组件

而不是需要

React.Component

一样？或者它是使用语法完全不同的命名导出进行导入的，尽管它确实类似于解构

一个重要的推论问题是：

import React，{Component}…

是否不必要地将

Component

对象从

React

模块加载两倍于简单地

import React…

（假设

Component

是更大的React库的组成部分）

在

import

语法中没有发生解构。尽管它看起来有点相似，但它是一种独立的语法

导入的标识符是对模块初始化期间创建的对象的绑定。因此，实际上，您得到了两个到同一对象的绑定，这只需要额外的一个引用，仅此而已

无论在源代码树中导入模块多少次，它都只会初始化一次，所有值只创建一次。所有的

import

语句基本上都会“绑定”到内存中的值，而不会创建重复项

---

要回答您的第一个问题：

不，这不是对象分解。语法可能是以这种方式设置的，但没有确认它们是有意关联的。Per:

第15.2.2节进口

语法

[……]

ImportClause :
  [...]
  ImportedDefaultBinding , NamedImports

NamedImports :
  { }
  { ImportsList }
  { ImportsList , }

[……]

ImportClause :
  [...]
  ImportedDefaultBinding , NamedImports

NamedImports :
  { }
  { ImportsList }
  { ImportsList , }

这是完全独立的语法

回答你的第二个问题：

是的，它导入它两次，一次是作为默认导出的

React

访问

React.Component

，一次是作为命名导出的

Component

。Per:

第12.2.2节静态语义：边界名称

[……]

ImportClause :
  [...]
  ImportedDefaultBinding , NamedImports

NamedImports :
  { }
  { ImportsList }
  { ImportsList , }

ImportClause:ImportedDefaultBinding，NamedImports

让

names

作为导入的DefaultBinding的边界名

将

NamedImports

的边界名元素附加到

NamedImports

返回

名称

如您所见，使用

import-React，{Component}

导入的名称被绑定两次，这意味着您将

React

作为默认导出，从而

React.Component

，然后绑定的名称

Component

也被附加到导入的名称中。实际上，您可以在两个不同的绑定或名称下获得它两次

---

应该注意的是，只有绑定名称不同

React.Component

和

Component

引用同一个对象，只是绑定不同，因为您是使用命名导出导入的。导入

React

后，

React.Component

已导入。

{Component}

所做的就是创建一个新的绑定到已经导入的对象。

记录

React.Component===Component

结果表明它们是完全相同的对象

true

，我不知道为什么，但你的问题的答案似乎是

no

。我做了一个很大的编辑，只是想让问题更清楚。如果有任何问题，您可以根据需要回滚并进行编辑。无论您引用模块的频率如何（使用多个绑定，甚至使用多个语句，甚至使用解析为同一目标的不同说明符），都将只有一个依赖项和一个实例化。是的，回答原来的问题：大括号中的标识符命名为imports。一般来说，它们与默认导入无关，默认导入可能是一个完全不同的值，只是在这个示例中，

react

有一个由命名导出组成的默认导出对象。@dandavis哦，这很复杂：-s谢谢，现在有意义了吗？@Bergi这正是我无法表达的，谢谢。