javascript - Was bewirkt "export default" in JSX?

Ich möchte fragen, was der letzte Satz bedeutet und macht (export default HelloWorld;), aber ich kann keine Tutorials darüber finden.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Antwort #1

Exportieren wie export default HelloWorld; und importieren, wie import React from 'react', sind Teil des ES6-Modulsystems.

Ein Modul ist eine eigenständige Einheit, die Vermögenswerte für andere Module mittels export bereitstellen und Vermögenswerte von anderen Modulen mittels import übernehmen kann.

In deinem 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 gibt es zwei Arten von Exporten:

Benannte Exporte - zum Beispiel ist export function func() {} ein benannter Export mit dem Namen func. Benannte Module können mit import { exportName } from 'module'; importiert werden. In diesem Fall sollte der Name des Imports derselbe sein wie der Name des Exports. Um die func im Beispiel zu importieren, müssen Sie import { func } from 'module'; verwenden. In einem Modul kann es mehrere benannte Exporte geben.

Standardexport - ist der Wert, der aus dem Modul importiert wird, wenn Sie die einfache Importanweisung import X from 'module' verwenden. X ist der Name, der der lokal zugewiesenen Variablen gegeben wird, die den Wert enthält, und er muss nicht wie der originäre Export benannt sein. Es kann nur einen Standardexport geben.

Ein Modul kann sowohl benannte Exporte als auch einen Standardexport enthalten, und sie können zusammen mit import defaultExport, { namedExport1, namedExport3, etc... } from 'module'; importiert werden.

Antwort #2

export default wird verwendet, um eine einzelne Klasse, Funktion oder einen primitiven Typ aus einer Skriptdatei zu exportieren.

Der Export kann auch geschrieben werden als

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

Du könntest dies auch als Funktionskomponente schreiben wie

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

Dies wird verwendet, um diese Funktion in eine andere Skriptdatei zu importieren

import HelloWorld from './HelloWorld';

Du importierst es nicht unbedingt als HelloWorld, du kannst ihm jeden Namen geben, da es ein Standardexport ist

Ein wenig über den Export

Wie der Name schon sagt, wird es verwendet, um Funktionen, Objekte, Klassen oder Ausdrücke aus Skriptdateien oder Modulen zu exportieren

Utiliites.js

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

Dies kann importiert und verwendet werden als

App.js

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

Oder

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

Wenn export default verwendet wird, ist dies viel einfacher. Skriptdateien exportieren einfach eine Sache. cube.js

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

und verwendet als App.js

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

Antwort #3

Die einfachste Erklärung für default export ist

Export ist eine Funktion von ES6, die verwendet wird, um ein Modul (Datei) zu exportieren und es in einem anderen Modul (Datei) zu verwenden.

Standardexport:

default export ist die Konvention, wenn Sie nur ein Objekt (Variable, Funktion, Klasse) aus der Datei (Modul) exportieren möchten.
Es kann nur einen Standardexport pro Datei geben, aber nicht auf nur einen Export (benannter Export) beschränkt werden..
Beim Importieren eines standardmäßig exportierten Objekts können wir es ebenfalls umbenennen.

Export oder benannter Export:

Es wird verwendet, um das Objekt (Variable, Funktion, Klasse) mit demselben Namen zu exportieren.
Es wird verwendet, um mehrere Objekte aus einer Datei zu exportieren.
Es kann beim Import in einer anderen Datei nicht umbenannt werden, es muss denselben Namen haben, der beim Export verwendet wurde, aber wir können seinen Alias mit dem as-Operator erstellen.

In React, Vue und vielen anderen Frameworks wird der Export hauptsächlich verwendet, um wiederverwendbare Komponenten zu exportieren, um modulbasierte Anwendungen zu erstellen.

Antwort #4

In einfachen Worten -

Die Export-Anweisung wird verwendet, wenn JavaScript-Module erstellt werden, um Funktionen, Objekte oder primitive Werte aus dem Modul zu exportieren, sodass sie von anderen Programmen mit der Import-Anweisung verwendet werden können.