Разница между синтаксисом импорта и импорта {Компонент}

Скажем, мы используем React с ES6. Мы импортируем React и Component как

import React from 'react'
import { Component } from 'react'

Почему разница в синтаксисе? Не можем ли мы использовать, как указано ниже?

import Component from 'react'

Ответ 1

Вот docs для import.

import React from 'react'

Вышеприведенный вариант - это импорт по умолчанию. Импорт по умолчанию экспортируется с помощью export default .... Может существовать только один экспорт по умолчанию.

import { Component } from 'react'

Но это import import (named import). Импорт участников экспортируется с помощью export .... Может быть много экспорта участников.

Вы можете импортировать оба с помощью этого синтаксиса:

import React, { Component } from 'react';

В JavaScript по умолчанию и названные им импорта разделены, поэтому вы не можете импортировать импорт имён, как это было по умолчанию. Следующее, устанавливает имя Component для экспорта по умолчанию пакета 'react' (который не будет таким же, как React.Component:

import Component from 'react';

Ответ 2

Компонент - это именованный экспорт. например Поэтому он должен быть разрушен с помощью {}.

Реагирование - это экспорт по умолчанию для React из "response". например export default React

Ответ 3

Если в любом файле вы экспортируете что-то по умолчанию с инструкцией типа "export default React", тогда это можно импортировать как "import React".

Для других экспонатов, которые не являются стандартными, нам нужно указать, что мы действительно хотим импортировать, закрыв это в скобках, таких как "import {Components}".