"导出默认值"在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 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';.一个模块中可以有多个命名导出.

默认导出 - 如果使用简单导入语句,则是从模块导入的值import X from 'module'.X是将在本地赋予包含该值的变量的名称,并且不必像原始导出那样命名.只能有一个默认导出.

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

Answer 2

最简单的理解default export是

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

默认导出：

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

导出或命名导出：

1. 用于导出同名对象（变量、函数、类）。

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

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

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

Answer 3

简单来说-

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

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

Answer 4

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

Answer 5

• 在了解 Export Default 之前，我们先了解一下什么是 Export 和 Import： 通俗地说：导出是可以发送给他人的商品和服务，类似地，功能组件中的导出意味着您让您的功能或组件被其他人使用脚本。
• 导出默认值意味着您只想导出脚本中默认存在的一个值，以便其他脚本可以导入该值以供使用。
• 这对于代码的可重用性来说是非常必要的。

让我们看看如何使用它的代码

import react from 'react'

function Header() {
  return <p><b><h1>This is the Heading section</h1></b></p>;
}

export default Header;

• 由于这个导出，它可以像这样导入

  import React from 'react';
  import reactDom from 'react-dom';
  import Header from './Header';
  
  reactDom.render(
    <>
      <Header />
    </>, document.getElementById('root')
  )
  

• 如果有人评论该export部分，您将收到以下错误：

  import react from 'react'
  
  function Header() {
    return <p><b><h1>This is the Heading section</h1></b></p>;
  }
  
  // export default Header;
  

你会得到这样的错误：