Javascript JSX 中的“导出默认值”有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36426521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does "export default" do in JSX?
提问by Digweed
I want to ask what the last sentence means and does (export default HelloWorld;) but I can't find any tutorials about it.
我想问最后一句是什么意思和做什么（导出默认的HelloWorld；）但我找不到任何关于它的教程。
// hello-world.jsx
import React from 'react';
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
export default HelloWorld;
回答by Ori Drori
Exportlike export default HelloWorld;and import, such as import React from 'react'are part of the ES6 modules system.
出口喜欢export default HelloWorld;和进口，比如import React from 'react'是一部分ES6模块系统。
A module is a self contained unit that can expose assets to other modules using export, and acquire assets from other modules using import.
模块是一个自包含单元，可以使用 向其他模块公开资产export，并使用获取其他模块的资产import。
In your code:
在您的代码中：
import React from 'react'; // get the React object from the react module
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
export default HelloWorld; // expose the HelloWorld component to other modules
In ES6 there are two kinds of exports:
在 ES6 中有两种导出：
Named exports- for example export function func() {}is a named export with the name of func. Named modules can be imported using import { exportName } from 'module';.In this case, the name of the import should be the same as the name of the export. To import the func in the example, you'll have to use import { func } from 'module';. There can be multiple named exports in one module.
命名导出- 例如export function func() {}，名称为func. 可以使用命名模块导入import { exportName } from 'module';.在这种情况下，导入的名称应与导出的名称相同。要在示例中导入 func，您必须使用import { func } from 'module';. 一个模块中可以有多个命名导出。
Default export- is the value that will be imported from the module, if you use the simple import statement import X from 'module'. X is the name that will be given locally to the variable assigned to contain the value, and it doesn't have to be named like the origin export. There can be only one default export.
默认导出- 是将从模块导入的值，如果您使用简单的导入语句import X from 'module'。X 是将在本地指定给包含该值的变量的名称，它不必像原始导出一样命名。只能有一个默认导出。
A module can contain both named exports and a default export, and they can be imported together using import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.
一个模块可以包含命名导出和默认导出，并且可以使用import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.
回答by sudo bangbang
export defaultis used to export a single class, function or primitive from a script file.
export default用于从脚本文件导出单个类、函数或原语。
The export can also be written as
导出也可以写成
export default class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
You could also write this as a function component like
你也可以把它写成一个函数组件，比如
export default const HelloWorld = () => (<p>Hello, world!</p>);
This is used to import this function in another script file
这用于在另一个脚本文件中导入此函数
import HelloWorld from './HelloWorld';
You don't necessarily import it as HelloWorldyou can give it any name as it's a default export
您不必导入它，因为HelloWorld您可以为其指定任何名称，因为它是默认导出
A little about export
关于出口的一点
As the name says, it's used to export functions, objects, classes or expressions from script files or modules
顾名思义，它用于从脚本文件或模块中导出函数、对象、类或表达式
Utiliites.js
实用程序.js
export function cube(x) {
return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;
This can be imported and used as
这可以导入并用作
App.js
应用程序.js
import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
Or
或者
import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo); // 4.555806215962888
When export default is used, this is much simpler. Script files just exports one thing. cube.js
当使用 export default 时，这要简单得多。脚本文件只导出一件事。 立方体.js
export default function cube(x) {
return x * x * x;
};
and used as App.js
并用作 App.js
import Cube from 'cube';
console.log(Cube(3)); // 27
回答by Ankit Pandey
In Simple Words -
简单来说——
The export statement is used when creating JavaScript modules to export functions, objects, or primitive valuesfrom the module so they can be used by other programs with the import statement.
在创建 JavaScript 模块以从模块导出函数、对象或原始值时使用 export 语句，以便其他程序可以使用 import 语句使用它们。
Here is a link to get clear understanding : MDN Web Docs
这是一个可以清晰理解的链接：MDN Web Docs
回答by Muhammad
Simplest Understanding for default exportis
最简单的理解default export是
Exportis ES6's feature which is used to Export a module(file) and use it in some other module(file).
Export是 ES6 的特性，用于导出模块（文件）并在其他模块（文件）中使用它。
Default Export:
默认导出：
default exportis the convention if you want to export only one object(variable, function, class) from the file(module).- There could be only one default export per file, but not restricted to only one export.
- When importing default exported object we can rename it as well.
default export如果您只想从文件（模块）中导出一个对象（变量、函数、类），这是惯例。- 每个文件只能有一个默认导出，但不限于只有一个 export。
- 导入默认导出的对象时，我们也可以重命名它。
Export or Named Export:
导出或命名导出：
It is used to export the object(variable, function, calss) with the same name.
It is used to export multiple objects from one file.
It cannot be renamed when importing in another file, it must have the same name that was used to export it.
用于导出同名对象（变量、函数、类）。
它用于从一个文件中导出多个对象。
在另一个文件中导入时不能重命名，它必须与导出时使用相同的名称。
In React, Vue and many other frameworks the Export is mostly used to export reusable components to make modular based applications.
在 React、Vue 和许多其他框架中，Export 主要用于导出可重用组件以制作基于模块化的应用程序。
