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

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return 

Hello, world!

; } } export default HelloWorld;

Digweed

Ответов: 6

Ответы (6)

Экспорт как экспорт по умолчанию HelloWorld; и импорт, например импорт 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 

Hello, world!

; } } export default HelloWorld; // expose the HelloWorld component to other modules

В ES6 есть два вида экспорта:

Именованный экспорт - например, функция экспорта func () {} - это именованный экспорт с именем func. Именованные модули можно импортировать с помощью import {exportName} from 'module';. В этом случае имя импорта должно совпадать с именем экспорта. Чтобы импортировать функцию в примере, вам нужно использовать import {func} from 'module';. В одном модуле может быть несколько именованных экспортов.

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

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

  • Прежде чем узнать об экспорте по умолчанию, давайте разберемся, что такое экспорт и импорт: В общем смысле: экспорт - это товары и услуги, которые могут быть отправлены другим, аналогично, экспорт в функциональных компонентах означает, что вы позволяете своей функции или компоненту использовать другой скрипт.
  • Экспорт по умолчанию означает, что вы хотите экспортировать только одно значение, которое по умолчанию присутствует в вашем скрипте, чтобы другие скрипты могли импортировать его для использования.
  • Это очень необходимо для повторного использования кода.

Давайте посмотрим, как мы можем использовать это

  import react from 'react'

function Header()
{
    return 

This is the Heading section

; } **export default Header;**
  • Из-за этого экспорта его можно импортировать так:

импортировать заголовок из './Header'; enter image description here

  • если кто-то прокомментирует раздел экспорта, вы получите следующую ошибку:

    enter image description here

Вы получите такую ​​ошибку: - enter image description here

Простейшее понимание для экспорта по умолчанию это

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

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

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

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

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

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

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

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

экспорт по умолчанию используется для экспорта отдельного класса, функции или примитива из файла сценария.

Экспорт также можно записать как

export default class HelloWorld extends React.Component {
  render() {
    return 

Hello, world!

; } }

Вы также можете записать это как функциональный компонент, например

export default function HelloWorld() {
  return 

Hello, world!

}

Используется для импорта этой функции в другой файл сценария

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 Web Docs

2022 WebDevInsider