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

【问题标题】：Does importing the default export along with a named export load the module twice?导入默认导出和命名导出是否会两次加载模块？
【发布时间】：2017-03-16 02:11:35
【问题描述】：

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

import React, { Component } from 'react';

导入模块的解构是否像解构对象以实现Component 而不是需要React.Component？还是使用具有完全不同语法的命名导出进行导入，尽管它确实类似于解构？

一个重要的推论问题：与简单的 import React ... 相比，import React, { Component } ... 是否从 React 模块中不必要地加载了 Component 对象（假设 Component 是更大的 React 库的组成部分）？

【问题讨论】：

logging React.Component === Component 原来它们是完全相同的对象。 true ，我不知道为什么，但您的问题的答案似乎是 no 。
我做了一个相当大的编辑，只是想让问题更清楚。如果有任何问题，您可以根据需要回滚并进行编辑。
无论您多久引用一个模块（具有多个绑定，甚至具有多个语句，甚至具有解析到同一目标的不同说明符），都将只有一个依赖项和一个实例化。跨度>
是的，回答最初的问题：花括号中的标识符被命名为导入。通常，它们与可能是完全不同的值的默认导入无关，只是在此示例中 react 有一个由命名导出组成的默认导出对象。

标签： javascript reactjs import ecmascript-6

【解决方案1】：

回答你的第一个问题：

不，这不是对象解构。语法可能已经设置为关联，但没有确认它们是故意相关的。每the ECMAScript 2015 Language Specification：

第 15.2.2 节导入

语法

[...]

ImportClause :
  [...]
  ImportedDefaultBinding , NamedImports

[...]

NamedImports :
  { }
  { ImportsList }
  { ImportsList , }

这是完全独立的语法。

回答你的第二个问题：

是的，它会导入两次，一次是React，默认导出为React.Component，一次为Component，作为命名导出。每the specification:

第 12.2.2 节静态语义：BoundNames

[...]

ImportClause : ImportedDefaultBinding , NamedImports

让names 成为ImportedDefaultBinding的BoundNames。

将NamedImports的BoundNames的元素附加到names。

返回names。

如您所见，您使用import React, { Component } 导入的名称被绑定了两次，这意味着您将React 作为默认导出，因此React.Component，然后绑定名称Component 也附加到您导入的名字。您基本上可以在两个不同的绑定或名称下获得两次。

需要注意的是，只有绑定名称不同。 React.Component 和 Component 引用同一个对象，只是使用不同的绑定，因为您使用命名导出导入。导入React 后，React.Component 已被导入。 { Component } 所做的只是为已导入的对象创建一个新绑定。

【讨论】：

【解决方案2】：

import 语法中没有发生解构。尽管它看起来有些相似 - 它是一个单独的语法。
导入的标识符是与模块初始化期间创建的对象的绑定。所以实际上你得到了同一个对象的 2 个绑定，这会花费你 1 个额外的引用，仅此而已。
无论您在源代码树中导入模块多少次，它都只会被初始化一次，所有值都只创建一次。而且所有import 语句基本上都会“绑定”到内存中的值，而不会产生重复。

【讨论】：

@dandavis 哦，这很复杂 :-S 谢谢，现在更有意义了吗？
@Bergi 这正是我无法表达的，谢谢。