Почему компонент React работает только с «export default»?

Быстрый ответ

Синтаксис export default в ES6 значительно облегчает процесс импорта React-компонентов, исключая необходимость использования фигурных скобок. В дополнение к тому, что именованные экспорты требуют точного указания названия и пары фигурных скобок, экспорт по умолчанию освобождает от этих ограничений:

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

export default class MyComponent extends React.Component {} 
// "Я доступен и уединён."

import MyComponent from './MyComponent';

Именованный экспорт:

export class MyComponent extends React.Component {}
// "Воспользуйся мной осознанно, иначе вовсе не трогай!"

import { MyComponent } from './MyComponent';

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

Анализ: Преимущества использования "Export Default" для React-компонентов

Упрощение синтаксиса при импорте компонентов

В React часто применяется практика один компонент – один файл для улучшения поддерживаемости кода, и export default идеально подходит для этого подхода. Он позволяет выполнять прямые импорты без лишних символов, что делает код более чистым и наглядным:

// Экспорт по умолчанию делает импорт изящнее
import HeroComponent from './HeroComponent';
// "HeroComponent теперь с нами, без лишних вопросов!"

// Именованные экспорты заставляют нас иметь дело с более загруженными импортами
import { SidekickComponent, VillainComponent } from './CharacterComponents';
// "Вся команда на месте? Давай проверим!"

Подробнее об этом расскажет наш спикер на видео

Возможность свободного переименования

Одно из преимуществ экспорта по умолчанию – возможность его оперативного переименования при импорте без каких-либо дополнительных действий:

// При использовании экспорта по умолчанию можно легко переименовать импортируемый компонент
import SuperHeroComponent from './HeroComponent';
// "Посмотрите в небо! Это SuperHeroComponent!"

// Для переименования именованных экспортов требуется алиас
import { HeroComponent as ClarkKent } from './CharacterComponents';
// "Тсс! Никому не говорите, но это ClarkKent."

Совместимость с динамическими импортами, код-сплиттингом и lazy loading

В контексте динамических импортов с использованием React.lazy, экспорт по умолчанию позволяет применять более простой код-сплиттинг и ленивую загрузку:

// Ленивая загрузка с использованием экспорта по умолчанию
const LazyHeroComponent = React.lazy(() => import('./HeroComponent'));
// "Сразу как потребуюсь, я с вами на связи."

Визуализация

Давайте представим ES6 React-компонент в роли героя эпического сюжета:

🎭 Пьеса: "Приключения React"
👤 Персонаж (Компонент): "HeroComponent"

Без export default наш HeroComponent выглядит как актёр без возможности появиться на сцене:

За кулисами: 👤⏳ (Вечное ожидание...)
// "Столь обильный талант, но нет возможности его проявить..."

С export default наш HeroComponent оказывается в центре внимания:

На сцене: 👤🌟 (Сияет и готов к выступлению!)
// "Настал мой черед! Великое возвращение!"

Таким образом export default HeroComponent; гарантирует, что когда реализуется подъем занавеса (приложение загружается), наш герой вызывается появиться перед зрителями (импортироваться и использовать в приложении).

На язык импорта это можно перевести так:

📦🔍: "Вот и ты, готов к действию?"

Зачем и Как: Детальный разбор "Export Default"

Ограничения именованных экспортов

При использовании именованных экспортов, компоненты необходимо импортировать с тем же именем, что и при экспорте, что может создавать путаницу и вызвать конфликты:

// Возможные замешательства и конфликты имен
import { TheRealHero as MainHero, HeroImpostor as OtherHero } from './VariousHeroes';
// "Стоп, кто из вас настоящий герой?"

Преимущества "Export Default"

Export default не только облегчает синтаксис, но также подходит для интеграции с библиотеками или инструментами, которые ожидают наличие экспорта по умолчанию в каждом модуле. Это особенно важно, когда речь идет о библиотеках, автоматически связывающих или оптимизирующих ваши компоненты.

Импорт из именованных экспортов и из экспорта по умолчанию

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

// Импорт из нескольких видов экспортов одновременно
import HeroComponent, { SidekickComponent, utilityFunction } from './AdventureComponents';
// "Почему бы не взять все сразу? Мы же собрали эту команду!"

Полезные материалы

1. export – JavaScript | MDN — Глубокий анализ конструкций export в ES6-модулях.
2. Компоненты и пропсы – React — Подробная информация о компонентах и пропсах React для лучшего понимания их экспорта.
3. ES6 в деталях: Модули – Mozilla Hacks — Обстоятельный анализ модулей ES6.
4. Узнать ES2015 · Babel — О том, как Babel обрабатывает модули ES2015, для осознания схем импорта/экспорта в JavaScript.
5. 16. Модули — Исчерпывающее разъяснение системы модулей в ES6 от доктора Акселя Раушмайера.
6. Почему я перестал использовать export default в своих JavaScript-модулях – Human Who Codes — Обзор причин для отказа от export default и выбор в пользу именованных экспортов в JavaScript.