Was macht "Standard exportieren" in JSX?

Ich möchte fragen, was der letzte Satz bedeutet und tut (Standard-HelloWorld exportieren;), aber ich kann keine Tutorials dazu finden.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

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

Ein Modul ist eine eigenständige Einheit, die Assets mithilfe anderer Module verfügbar machen und mithilfe von exportAssets Assets von anderen Modulen erwerben kann import.

In Ihrem 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 - ist beispielsweise export function func() {}ein benannter Export mit dem Namen func. Benannte Module können mit importiert werden. import { exportName } from 'module';.In diesem Fall sollte der Name des Imports mit dem Namen des Exports übereinstimmen. Um die Funktion im Beispiel zu importieren, müssen Sie verwenden import { func } from 'module';. In einem Modul können mehrere benannte Exporte vorhanden sein.

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

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

export default wird verwendet, um eine einzelne Klasse, Funktion oder ein Grundelement aus einer Skriptdatei zu exportieren.

Der Export kann auch als geschrieben werden

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

Sie können dies auch als Funktionskomponente wie schreiben

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

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

import HelloWorld from './HelloWorld';

Sie müssen es nicht unbedingt importieren, da HelloWorldSie ihm einen beliebigen Namen geben können, da es sich um einen Standardexport handelt

Ein wenig über den Export

Wie der Name schon sagt, werden damit Funktionen, Objekte, Klassen oder Ausdrücke aus Skriptdateien oder -modulen exportiert

Utiliites.js

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

Dies kann importiert und als verwendet werden

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 die Standardeinstellung für den Export verwendet wird, ist dies viel einfacher. Skriptdateien exportieren nur eine Sache. cube.js

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

und als App.js verwendet

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

In einfachen Worten -

Die export-Anweisung wird beim Erstellen von JavaScript-Modulen verwendet , um Funktionen, Objekte oder primitive Werte aus dem Modul zu exportieren, damit sie von anderen Programmen mit der import-Anweisung verwendet werden können.

Hier ist ein Link, um ein klares Verständnis zu erhalten: MDN-Webdokumente

Einfachstes Verständnis für default exportist

Export ist die Funktion von ES6, mit der ein Modul (eine Datei) exportiert und in einem anderen Modul (Datei) verwendet wird.

Standardexport:

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

Export oder benannter Export:

1. Es wird verwendet, um das Objekt (Variable, Funktion, Calss) mit demselben Namen zu exportieren.

2. Es wird verwendet, um mehrere Objekte aus einer Datei zu exportieren.

3. Es kann beim Importieren in eine andere Datei nicht umbenannt werden. Es muss denselben Namen haben, mit dem es exportiert wurde.

In React, Vue und vielen anderen Frameworks wird der Export hauptsächlich zum Exportieren wiederverwendbarer Komponenten verwendet, um modular basierte Anwendungen zu erstellen.