Что делает "экспорт по умолчанию" в JSX?

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

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Ответ 1

Экспорт как 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';. В этом случае имя импорта должно совпадать с именем экспорта. Чтобы импортировать func в примере, вам нужно будет использовать import { func } from 'module'; , В одном модуле может быть несколько именованных экспортов.

Экспорт по умолчанию - это значение, которое будет импортировано из модуля, если вы используете простую инструкцию import X from 'module'. X - это имя, которое будет дано локально для переменной, назначенной для хранения значения, и оно не должно именоваться как исходный экспорт. Там может быть только один экспорт по умолчанию.

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

Ответ 2

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

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

Вот ссылка, чтобы получить четкое понимание: MDN Web Docs

Ответ 3

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

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

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

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

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

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

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

Ответ 4

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