Question

我在React中广泛使用了命名导出和默认导出，并且遇到了这两种相似的语法。

export default from './Button';

export { default } from './Button';

有人可以告诉我他们有什么区别吗？似乎他们在使用前一个VSCode Go To Definition函数无法在前者上执行相同的操作。

Answer 1

对于文件的多次导出，应使用Named exports，您可以使用{}进行导入。如果只有一个出口，则理想情况下应使用Default export。

请参阅Javascript Exports以获得进一步的了解。请注意，default是关键字。

Answer 2

ES6为我们提供了导入模块并将其用于其他文件的功能。用React术语严格来说，可以通过从各自模块中导出组件并在其他文件中使用它们来在其他组件中使用无状态组件。

ES6提供了两种从文件中导出模块的方法：名为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

Here是一篇很不错的文章，旨在明确它们之间的区别，但是最大的区别是每个文件只能有一个Default Export，例如：

export Button from './Button';

如果需要导出多个项目，则应使用Named Export，例如：

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

Answer 4

对于文档，您可以参考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 5

假设从abc()导出了一个名为./Button的函数

有人可以告诉我他们有什么区别吗？

区别在于您的第一个export重新导出功能abc为未命名导出，因此可以将其作为任何AssignedbyImporterName导入：

import AssignedbyImporterName from ...

并用作AssignedbyImporterName：

AssignedbyImporterName();                       // call function abc()

您的第二个export将abc重新导出为命名导出，在另外一个未命名对象的作用下，该对象充当命名空间，因此可以作为任何{{ 1}}：

AssignedbyImporterNamespace

并使用：

import AssignedbyImporterNamespace from ...

Answer 6

有什么区别

两者之间存在巨大差异，一个是在标准ES6中，另一个是一个提议。

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

这是标准的ES6：它将从当前模块中导出“默认按钮”（不更改当前模块的本地范围）

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

这是一个建议，它解释了为什么它在vscode中不起作用这是提案https://github.com/tc39/proposal-export-default-from（仍处于第一阶段）

基本上，根据提案，两者都应完全相同地工作，该提案只是另一种更为优雅的编写方式-使其与我们在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。如果发生这种情况，将来还会有一段时间，您将不得不重新编写该代码。

Answer 7

如果需要导出多个对象，请使用已命名的导出（不带默认关键字）。

最简单的方法就是看一下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');

导出默认值和导出{默认值}之间的区别

7 个答案: