Was ist die Verwendung von Curly Braces in ES6 Import-statement

Ich kann sehen, dass es zwei verschiedene Möglichkeiten zum Importieren gibt

import React from 'react' import { render } from 'react-dom' 

der zweite hat Klammern. Was ist der Unterschied zwischen den beiden? und wann sollte ich Klammern hinzufügen? Vielen Dank

    Nun, der Unterschied zwischen dem, ob Sie Ihre Komponenten within brackets or without it importieren within brackets or without it liegt in der Art, wie Sie es export .

    Es gibt zwei Arten von Exporten

    1. Standardexport
    2. Namen exportieren

    Eine Komponente kann one default export and zero or more named Exporte haben

    Wenn eine Komponente ein Standard-Export ist, müssen Sie sie ohne Klammern importieren

     export default App; 

    Das importieren Sie als

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

    Ein benannter Export könnte ähnlich sein

     export const A = 25; 

    oder

     export {MyComponent}; 

    Sie können es als importieren

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

    oder

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

    Wenn Ihre Komponente über einen Standardexport und wenige benannte Exporte verfügt, können Sie sie sogar während des Imports mischen

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

    Ebenso sind React und ReactDOM im Falle von react und react-dom default exports wohingegen Component ein named export in react und render ein benannter Export in react-dom . Das ist der Grund, den Sie entweder tun können

     import ReactDOM from 'react-dom'; 

    und dann benutzen

     ReactDOM.render() 

    oder verwende es wie in deiner Frage erwähnt.

    Sie müssen keine Klammer hinzufügen, wenn Sie standardmäßig exportieren. Sie können nur Standard im Modul haben.

    Fall 1:

    Standardfunktion exportieren (num1, num2) {return num1 + num2; }

    Fall2:

    functionssumme (num1, num2) {Rückkehrnummer1 + Nummer2; }

    Export {Summe als Standard};

    Fall3:

    functionssumme (num1, num2) {Rückkehrnummer1 + Nummer2; }

    Exportsumme exportieren;

    Sie können den Standard importieren

    Importsumme von “./test.js”;

    console.log (Summe (1, 2));

    Betrachte primitives.js ,

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

    es kann so importiert werden,

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

    In diesem Fall wird die sum als “Standard-Export” bezeichnet und ein Modul kann nur einen einzigen “Standard-Export” enthalten.

    sub und sqr heißen “Named Export” und ein Modul kann mehrere benannte Exporte enthalten.

    Curly Braces werden verwendet, um single(specific) property zu importieren, während das Wort ohne geschweifte Klammern das entire object aus dieser Datei import .

    Z.B.,

     import React, { Component } from 'react'; 

    Hier repräsentiert das Wort React das entire object aus der Datei 'react'

    {Component} bedeutet, dass wir angeben, dass die particular property aus der Datei importiert werden soll.