Что делает «экспорт по умолчанию» в 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

Простейшее понимание для default exportIS

Export - это функция ES6, которая используется для экспорта модуля (файла) и использования его в каком-либо другом модуле (файле).

Экспорт по умолчанию:

1. default export это соглашение, если вы хотите экспортировать только один объект (переменную, функцию, класс) из файла (модуля).
2. Для каждого файла может быть только один экспорт по умолчанию, но не только один экспорт .
3. При импорте экспортируемого объекта по умолчанию мы также можем его переименовать.

Экспорт или именованный экспорт:

1. Он используется для экспорта объекта (переменной, функции, запроса) с тем же именем.

2. Он используется для экспорта нескольких объектов из одного файла.

3. Его нельзя переименовать при импорте в другой файл, он должен иметь то же имя, которое использовалось для его экспорта, но мы можем создать его псевдоним с помощью asоператора.

В React, Vue и многих других фреймворках экспорт в основном используется для экспорта повторно используемых компонентов для создания модульных приложений.

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

Оператор экспорта используется при создании модулей JavaScript для экспорта функций, объектов или примитивных значений из модуля, чтобы они могли использоваться другими программами с оператором импорта.

Вот ссылка для ясного понимания: MDN Web Docs

Проще говоря, экспорт означает, что сценарий, который мы написали, может использоваться другим сценарием. Если мы говорим экспорт, мы имеем в виду, что любой модуль может использовать этот сценарий, импортировав его.