“导出默认值”在JSX中做什么？

Question

我想问最后一句是什么意思和做（导出默认的HelloWorld；），但我找不到关于它的任何教程。

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Answer 1

对默认导出的最简单理解是

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

默认导出：

1. 默认导出是约定，如果你想从文件（模块）中只导出一个对象（变量，函数，类）。
2. 每个文件只能有一个默认导出，但不限于只有一个导出（命名导出）。
3. 导入默认导出对象时，我们也可以重命名它。

导出或命名导出：

>

用于导出同名的对象（变量、函数、calss）。

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

在另一个文件中导入时不能重命名它，它必须与导出它时使用的名称相同，但我们可以使用as运算符创建它的别名。

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

Answer 2

导出默认值用于从脚本文件导出单个类、函数或基元。

导出也可以写成

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

您也可以将其作为函数组件编写，如

export default function HelloWorld() {
  return <p>Hello, world!</p>
}

这是用来在另一个脚本文件中导入此函数

import HelloWorld from './HelloWorld';

您不必将其作为HelloWorld导入，您可以为其指定任何名称，因为它是默认导出

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

Utilities.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

Answer 3

导出类似导出默认HelloWorld 和导入，例如从“React”导入React是ES6模块系统的一部分。

模块是一个自包含的单元，可以使用导出将资产公开给其他模块，并使用导入从其他模块获取资产。

在代码中：

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中有两种出口：

命名导出-例如导出函数func() {}是一个名为func的命名导出。命名的模块可以使用从模块导入{exportName}导入。在这种情况下，导入的名称应该与导出的名称相同。要在示例中导入func，您必须使用从模块导入{func}；。在一个模块中可以有多个命名的导出。

默认导出-如果使用简单的导入语句import X from'module'，则将从模块导入的值。X是将在本地指定给变量以包含该值的名称，它不必像原始导出那样命名。只能有一个默认导出。

模块可以包含命名的导出和默认的导出，并且可以使用导入default导出，{namedExport1，namedExport3等...}从'模块'；导入它们。