導入默認導出和命名導出是否會將模塊加載兩次？

Question

使用以下格式編寫import語句時會發生什么：

import React, { Component } from 'react';

導入模塊的解構是在解構對象以實現Component而不是需要React.Component嗎？ 或者它是使用具有完全不同語法的命名導出導入的，盡管它確實類似於解構？

一個重要的推論問題是： import React, { Component } ...不必從React模塊加載Component對象兩次，而import React ...簡單地import React ... （假設Component是更大的React庫的一個組成部分）？

Answer 1

回答你的第一個問題：

不，這不是對象解構。 語法可能已設置為相關的方式，但沒有確認它們是故意使其相關的。 根據ECMAScript 2015語言規范 ：

第15.2.2節進口

句法

[...]

 ImportClause : [...] ImportedDefaultBinding , NamedImports 

[...]

 NamedImports : { } { ImportsList } { ImportsList , } 

它是完全獨立的語法。

回答你的第二個問題：

是的，它導入兩次，一次是React ，默認導出為React.Component ， React.Component一次是Component作為命名導出。 根據規格 ：

第12.2.2節靜態語義：BoundNames

[...]

ImportClause : ImportedDefaultBinding , NamedImports

1. 讓names成為ImportedDefaultBinding的BoundNames。

2. 附加names NamedImports的NamedImports的元素。

3. 返回names 。

如您所見，導入的名稱import React, { Component }被綁定兩次，這意味着您將React作為默認導出，因此React.Component ，然后綁定名稱Component也會附加到導入的名稱。 你基本上在兩個不同的綁定或名稱下得到它兩次。

應該注意，只有綁定的名稱是不同的。 React.Component和Component引用相同的對象，只是使用不同的綁定，因為您使用命名的導入導入。 導入React ， React.Component已經導入。 所有{ Component }都會創建一個與已導入對象的新綁定。

Answer 2

1. import語法中沒有發生解構。 即使它看起來有點類似 - 它是一個單獨的語法。

2. 導入的標識符綁定到模塊初始化期間創建的對象。 所以實際上你會得到2個綁定到同一個對象，這需要額外的1個參考，僅此而已。

3. 無論您在源代碼樹中導入模塊多少次，它都只會初始化一次，所有值只創建一次。 並且所有import語句基本上都“綁定”到內存中的值而不創建重復項。