Що робить "експорт за замовчуванням" у JSX?

Я хочу запитати, що означає і робить останнє речення (експортувати за замовчуванням HelloWorld;), але я не можу знайти підручники з цього приводу.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Експорт як 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';.У цьому випадку імпорт імпорту повинен бути таким же, як ім'я експорту. Щоб імпортувати функцію у прикладі, вам доведеться скористатися import { func } from 'module';. В одному модулі може бути кілька імпортованих експортів.

Експорт за замовчуванням - це значення, яке буде імпортовано з модуля, якщо ви використовуєте просту заяву про імпорт import X from 'module'. X - це ім'я, яке буде надано локально змінній, присвоєній тому, що містить значення, і його не потрібно називати, як експорт походження. Експорт за замовчуванням може бути лише одним.

Модуль може містити як іменований експорт, так і експорт за замовчуванням, і їх можна імпортувати разом, використовуючи import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

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

Простими словами -

Оператор експорту використовується при створенні модулів JavaScript для експорту функцій, об'єктів або примітивних значень з модуля, щоб вони могли використовуватися іншими програмами з оператором імпорту.

Ось посилання, щоб отримати чітке розуміння: веб-документи MDN

Найпростіше розуміння - default exportце

Export є функцією ES6, яка використовується для експорту модуля (файлу) та використання його в іншому модулі (файлі).

Експорт за замовчуванням:

1. default export є умовою, якщо потрібно експортувати лише один об'єкт (змінну, функцію, клас) з файлу (модуля).
2. На файл може бути лише один експорт за замовчуванням, але не обмежується лише одним експортом .
3. При імпорті експортованого об'єкта за замовчуванням ми можемо також перейменувати його.

Експорт або іменований експорт:

1. Він використовується для експорту об'єкта (змінної, функції, calss) з тим же ім'ям.

2. Він використовується для експорту кількох об'єктів з одного файлу.

3. Він не може бути перейменований під час імпорту в інший файл, він повинен мати те саме ім’я, яке було використано для його експорту.

У React, Vue та багатьох інших структурах Експорт в основному використовується для експорту багаторазових компонентів для виготовлення модульних додатків.