Co robi „export default” w JSX?

Chcę zapytać, co oznacza i co robi ostatnie zdanie (eksport domyślny HelloWorld;), ale nie mogę znaleźć żadnych poradników na ten temat.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Eksport , jak export default HelloWorld;i import , jak import React from 'react'są częścią układu ES6 modułów .

Moduł jest samodzielną jednostką, która może udostępniać zasoby innym modułom przy użyciu exporti pozyskiwać zasoby z innych modułów za pomocą import.

W swoim kodzie:

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

W ES6 istnieją dwa rodzaje eksportu:

Nazwany eksport - na przykład export function func() {}nazwany eksport o nazwie func. Nazwane moduły można importować za pomocą import { exportName } from 'module';.W tym przypadku nazwa importu powinna być taka sama jak nazwa eksportu. Aby zaimportować funkcję w przykładzie, musisz użyć import { func } from 'module';. W jednym module może być wiele nazwanych eksportów.

Domyślny eksport - to wartość, która zostanie zaimportowana z modułu, jeśli użyjesz prostej instrukcji importu import X from 'module'. X to nazwa, która zostanie lokalnie nadana zmiennej przypisanej do przechowywania wartości i nie musi być nazywana tak jak w przypadku eksportu pochodzenia. Może istnieć tylko jeden domyślny eksport.

Moduł może zawierać zarówno nazwane eksporty, jak i domyślny eksport, i można je importować razem za pomocą import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default służy do eksportowania pojedynczej klasy, funkcji lub prymitywu z pliku skryptu.

Eksport można również zapisać jako plik

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

Możesz również zapisać to jako komponent funkcyjny, taki jak

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

Służy do importowania tej funkcji do innego pliku skryptu

import HelloWorld from './HelloWorld';

Niekoniecznie HelloWorldmusisz go importować, ponieważ możesz nadać mu dowolną nazwę, ponieważ jest to domyślny eksport

Trochę o eksporcie

Jak sama nazwa wskazuje, służy do eksportowania funkcji, obiektów, klas lub wyrażeń z plików skryptów lub modułów

Utiliites.js

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

Można to importować i używać jako

App.js

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

Lub

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

Gdy używane jest domyślne ustawienie eksportu, jest to znacznie prostsze. Pliki skryptów tylko eksportują jedną rzecz. cube.js

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

i używany jako App.js

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

Prostymi słowami -

Instrukcja export jest używana podczas tworzenia modułów JavaScript w celu eksportowania funkcji, obiektów lub wartości pierwotnych z modułu, aby mogły być używane przez inne programy z instrukcją import.

Tutaj znajduje się łącze umożliwiające zrozumienie: MDN Web Docs

Najprostsze zrozumienie default exportjest

Export to funkcja ES6, która służy do eksportowania modułu (pliku) i używania go w innym module (pliku).

Domyślny eksport:

1. default export jest konwencją, jeśli chcesz wyeksportować tylko jeden obiekt (zmienną, funkcję, klasę) z pliku (modułu).
2. Może istnieć tylko jeden domyślny eksport na plik, ale nie może być ograniczony tylko do jednego eksportu .
3. Podczas importowania domyślnego eksportowanego obiektu możemy również zmienić jego nazwę.

Eksport lub nazwany eksport:

1. Służy do eksportu obiektu (zmienna, funkcja, wartości) o tej samej nazwie.

2. Służy do eksportowania wielu obiektów z jednego pliku.

3. Nie można zmienić jego nazwy podczas importowania do innego pliku, musi mieć taką samą nazwę, jaka została użyta do wyeksportowania.

W React, Vue i wielu innych frameworkach Export jest używany głównie do eksportowania komponentów wielokrotnego użytku do tworzenia aplikacji opartych na modułach.