Что такое использование Curly Braces в заявлении импорта ES6

Ответ 1

Разница между тем, следует ли импортировать компоненты в скобках или без них, заключается в способе их export.

Есть два вида экспорта

1. Экспорт по умолчанию
2. Именованный Экспорт

Компонент может иметь один экспорт по умолчанию и ноль или более именованных экспортов

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

export default App;

Импорт это как

import App from './path/to/App';

Именованный экспорт может быть как

export const A = 25;

или же

export {MyComponent};

Вы можете импортировать его как

import {A} from './path/to/A';

или же

import {A as SomeName} from './path/to/A';

Если ваш компонент имеет один экспорт по умолчанию и несколько именованных экспортов, вы можете даже смешать их во время импорта

import App, {A as SomeName} from './path/to/file'; 

Аналогичным образом, в случае react и react-dom, React и ReactDOM является default exports по Component named export react render react-dom default exports, соответственно, в то время как, например, Component представляет собой named export в react и render является именованным экспортом в react-dom. Вот почему вы можете сделать

import ReactDOM from 'react-dom';

а затем использовать

ReactDOM.render()

или используйте как указано в вашем вопросе.

Ответ 2

Рассмотрим primitives.js,

export default (a, b) => a + b;
export const sub = (a, b) => a - b;
export const sqr = a => a**2;

его можно импортировать следующим образом:

import sum, { sub, sqr } from './primitives';

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

sub и sqr называются "Named Export", а модуль может содержать несколько именованных экспортных данных.

Ответ 3

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

case1:

экспорт функции по умолчанию (num1, num2) {     return num1 + num2; }

Случай 2:

сумма функции (num1, num2) {     return num1 + num2; }

export {sum as default};

case3:

сумма функции (num1, num2) {     return num1 + num2; }

экспорт суммы по умолчанию;

вы можете импортировать по умолчанию

импортировать сумму из "./test.js";

console.log(сумма (1, 2));

Ответ 4

Вьющиеся фигурные скобки используются для импорта single(specific) property, тогда как слово без фигурных скобок - это import entire object из этого файла.

Например.,

import React, { Component } from 'react';

Здесь слово React представляет для импорта entire object из файла 'react'

{Component} означает, что мы указываем, чтобы импортировать particular property из файла.