JSX中的“导出默认值”有什么作用？

我想问一下最后一句话的意思和作用（导出默认的HelloWorld;），但是我找不到关于它的任何教程。

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

出口喜欢export default HelloWorld;和进口，比如import React from 'react'是一部分ES6模块系统。

模块是一个独立的单元，可以使用将资产暴露给其他模块export，并使用来从其他模块获取资产import。

在您的代码中：

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

在ES6中，有两种导出：

命名出口 -例如，export function func() {}是名称为的命名出口func。可以使用导入命名模块。import { exportName } from 'module';.在这种情况下，导入的名称应与导出的名称相同。要在示例中导入func，您必须使用import { func } from 'module';。一个模块中可以有多个命名的导出。

默认export-是使用简单import语句将从模块中导入的值import X from 'module'。X是将在本地分配给分配为包含值的变量的名称，而不必像原始导出一样命名。默认只能有一个导出。

一个模块可以包含命名的导出和默认的导出，并且可以使用将它们一起导入import defaultExport, { namedExport1, namedExport3, etc... } from 'module';。

export default 用于从脚本文件中导出单个类，函数或基元。

导出也可以写成

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

您也可以将其编写为功能组件，例如

export default const HelloWorld = () => (<p>Hello, world!</p>);

这用于将该功能导入另一个脚本文件

import HelloWorld from './HelloWorld';

您不一定要导入它，HelloWorld因为它是默认导出，您可以给它起任何名字

关于出口的一点

顾名思义，它用于从脚本文件或模块中导出函数，对象，类或表达式

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

可以将其导入并用作

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

要么

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

使用导出默认值时，这要简单得多。脚本文件仅导出一件事。 cube.js

export default function cube(x) {
  return x * x * x;
};

并用作 App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

简单来说-

在创建JavaScript模块以从模块中导出函数，对象或原始值时，将使用export语句，以便其他程序与import语句一起使用它们。

这是一个可以清楚了解的链接：MDN Web文档

最简单的理解default export是

Export 是ES6的功能，用于导出模块（文件）并在其他模块（文件）中使用。

默认导出：

1. default export 如果只想从文件（模块）中导出一个对象（变量，函数，类），则为惯例。
2. 每个文件只能有一个默认导出，但不仅限于一个export。
3. 导入默认的导出对象时，我们也可以对其重命名。

出口或命名出口：

1. 它用于导出具有相同名称的对象（变量，函数，校准）。

2. 它用于从一个文件导出多个对象。

3. 导入另一个文件时，无法重命名该文件，它必须具有用于导出该文件的相同名称。

在React，Vue和许多其他框架中，Export主要用于导出可重用组件以制作基于模块的应用程序。