導出默認值和導出{默認值}之間的區別

Question

我在React中廣泛使用了命名導出和默認導出，並且遇到了這兩種類似的語法。

export default from './Button';

export { default } from './Button';

有人可以告訴我他們有什么區別嗎？ 似乎他們在使用以前的VSCode Go To Definition功能無法在前者上執行相同的操作。

Answer 1

對於文件的多個導出，應使用Named exports ，可以使用{}進行導入。 如果只有一個導出，則理想情況下應使用Default export 。

請參考Javascript導出以進一步了解。 請注意， default值為關鍵字。

Answer 2

ES6為我們提供了導入模塊並將其用於其他文件的功能。 用React術語嚴格來說，可以通過從各自模塊中導出組件並在其他文件中使用它們來在其他組件中使用無狀態組件。

ES6提供了兩種從文件導出模塊的方式：名為export和default export。

命名為出口：（出口）

使用命名導出，每個文件可以有多個命名導出。 然后導入要用大括號括起來的特定出口。 導入模塊的名稱必須與導出模塊的名稱相同。

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

將所有命名的導出導入到一個對象上：

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2
here

默認導出：（默認導出）

每個文件只能有一個默認導出。 導入時，我們必須指定一個名稱並導入，例如：

// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;

Answer 3

如果您需要導出多個對象，請使用命名的exports（不帶默認關鍵字）。

僅查看CommonJS中三種不同的ES6導入/導出樣式可以編譯成的最簡單的方法。

// Three different export styles
export foo;
export default foo;
export = foo;

// The three matching import styles
import {foo} from 'blah';
import foo from 'blah';
import * as foo from 'blah';

大致編譯為：

exports.foo = foo;
exports['default'] = foo;
module.exports = foo;

var foo = require('blah').foo;
var foo = require('blah')['default'];
var foo = require('blah');

Answer 4

這是一篇很好的文章，以明確說明它們之間的區別，但是最大的區別是每個文件只能有一個Default Export ，例如：

export Button from './Button';

並且在需要導出多個項目的情況下，應使用Named Export ，如：

export { ButtonAccept, ButtonCancel, ButtonInfo } from './Button';

Answer 5

對於文檔，您可以參考sSD和Alberto共享的鏈接，以及Clue的答案。 我創建了一個示例，以更好地理解它並為您提供幫助。

這是鏈接： https : //codesandbox.io/s/summer-surf-o78v1

如果鏈接過期的代碼：

應用結構為：

src
├── index.js
├── button                   
│   ├── index.js          
│   ├── Button.js      

src / index.js

import React from "react";
import ReactDOM from "react-dom";
import Button, { FillButton } from "./button";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Button />
      <FillButton />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

src / button / Button.js

import React from "react";

export const FillButton = () => {
  return <button style={{ background: "aquamarine" }}>Awesome bossom</button>;
};

const Button = () => {
  return <button>Awesome</button>;
};

export default Button;

src / button / index.js

export { default, FillButton } from "./Button";

希望這可以幫助！

Answer 6

假設從./Button導出了一個名為abc()的函數

有人可以告訴我他們有什么區別嗎？

• 不同之處在於，您的第一個export將abc函數abc導出為未命名的導出，以便可以將其導入為任何AssignedbyImporterName ：

import AssignedbyImporterName from ...

並用作AssignedbyImporterName ：

AssignedbyImporterName();                       // call function abc()

• 您的第二個export將abc作為已導出的名稱再導出到另一個未命名對象的保護下，該對象充當名稱空間，以便可以將其導入為任何AssignedbyImporterNamespace ：

import AssignedbyImporterNamespace from ...

並使用：

AssignedbyImporterNamespace.abc();             // call function abc()

Answer 7

有什么區別

兩者之間存在巨大差異，一個是在標准ES6中，另一個是一個建議。

// Standard ES6
export { default } from './Button';

這是標准的ES6：正在從當前模塊中導出“按鈕的默認值”（而不更改當前模塊的本地范圍）

// A Proposal
export default from './Button';

這是一個建議，並解釋了為什么它在vscode中不起作用這是建議https://github.com/tc39/proposal-export-default-from （仍處於階段1）

基本上，根據建議書，兩者應該完全一樣地工作，該建議書是另一種更為優雅的編寫方式-使其與我們在Standarad ES6中導出默認值的方式匹配。

如果您想了解提案的提出者為何提出該建議，請查看此處https://github.com/tc39/proposal-export-default-from#common-concerns

他們為什么都工作

今天使用的JavaScript不再僅僅是一種解釋型語言。 它更像是一種可移植的語言，其中我們編寫的內容（盡管使用JavaScript或類似的東西）仍然與我們為JS引擎發送的內容不同。

現在它可以為您工作（在您的代碼中），因為構建系統的一部分正在獲取使用此建議編寫的代碼並將其編譯為標准ES6。 如果我們要談論Babel最流行的JS轉譯器，則可以通過以下插件https://babeljs.io/docs/en/next/babel-plugin-proposal-export-default-from.html啟用此語法。

我應該繼續使用提案嗎

最好不，這是狀態1中的提議，即使Babel-或任何其他編譯器使它可行，也有可能永遠不會使其成為Standarad JavaScript。 如果發生這種情況，將來還會有一段時間，您將不得不重新編寫該代碼。