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

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

class App extends Component {
  render() {
    return (
      
This is my application.
    )
  }
}

export default App

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

Ecmascript, стандартный JavaScript основан на представлении концепции модулей в ES6.

Модуль-это автономная единица кода. Этот код может подвергать активы другим модулям, используя экспорт . Он также может потреблять активы из других модулей, используя Импорт Анкет

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

Это важно иметь в виду, потому что спецификация ES6 немного отличается.

Давайте рассмотрим именно эту строку кода.

export default App

• Сначала у нас есть Экспорт , это ключевое слово – разоблачение контента другим модулям.

• Далее у нас есть по умолчанию Анкет

По умолчанию является один из типов экспорта, доступных в ES6. Используя ключевое слово по умолчанию, мы говорим, что если вы импортируете этот модуль и не указываете, что вы импортируете из него, вы получите это! Для любого данного модуля у нас может быть только один экспорт по умолчанию.

• Наконец, у нас есть название актива, который мы экспортируем, в данном случае это Приложение Анкет

С тех пор Приложение экспортируется, мы можем использовать его в другом модуле, если мы импорт Это.

import App from "./App"

Эта точная строка кода появляется в index.js Когда вы создаете проект React.

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

В результате оказывается, что нам не нужно называть это Приложение вообще. Это только назначение имени.

import Whatever from "./App"

В этом случае Что угодно все еще наше компонент приложения! И мы можем использовать это.

ReactDOM.render(, document.getElementById('root'));

Как насчет экспорта нескольких активов или активов, не являющихся декоративными активами? На что это похоже?

export class App extends Component {
  render() {
    return (
      
This is my application.
    )
  }
}

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

Это сработает, но мы не можем импортировать его так же. Если я попытаюсь сделать это

import App from "./App"

Это дает мне эту ошибку

Мой оператор импорта не знает, что он присваивает этому Приложение название!

Без экспорта по умолчанию мне нужно явно назвать то, что я ищу, чтобы импортировать. Вот почему он называется названным импортом в ES6.

import {App} from "./App"

Это очень похоже на задание деструкции! Несмотря на то, что он технически отличается, по сравнению с временем Build и Runtime, это полезный способ запомнить синтаксис. Итак, это утверждение действительно говорит: загляните внутрь всего .App модуль. Я хочу экспортируемый актив под названием Приложение Внутри этого модуля.

Поскольку можно экспортировать несколько активов в одном модуле, также необходимо иметь возможность импортировать более одного за раз. Мы можем сделать это до тех пор, пока мы знаем имена.

import {App, Dev, Post} from "./App"

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

import App, {Dev, Post} from "./App"

Вуаля!

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

Оригинал: “https://dev.to/laurieontech/exports-and-imports-and-defaults-oh-my-fa3”