¿Cuándo debo usar llaves para importar ES6?

TL; DR : Se usan llaves si desea importar una exportación no predeterminada.

Vea la respuesta de Dan Abramov para más detalles.

Yo diría que también hay una notación con estrellas para la palabra clave import ES6 que vale la pena mencionar.

Si intenta consolar log Mix:

import * as Mix from "./A";
console.log(Mix);

Obtendrá:

¿Cuándo debo usar llaves para importar ES6?

Los soportes son dorados cuando solo necesita componentes específicos del módulo, lo que hace que las huellas sean más pequeñas para los bundlers como webpack.

Dan Abramov respuesta anterior explica acerca de la exportaciones por defecto y exportaciones con nombre .

¿Cuál usar?

Citando a David Herman: ECMAScript 6 favorece el estilo de exportación único/predeterminado, y da la sintaxis más dulce para importar el predeterminado. Importar exportaciones con nombre puede e incluso debe ser un poco menos conciso.

Sin embargo, en TypeScript la exportación con nombre se ve favorecida debido a la refactorización. Ejemplo, si exporta por defecto una clase y cambia el nombre it, el nombre de la clase cambiará solo en ese archivo y no en las otras referencias, con las exportaciones con nombre el nombre de la clase se renombrará en todas las referencias. Las exportaciones con nombre también son preferidas para las utilidades.

Uso general lo que prefiera.

Adicional

La exportación predeterminada es en realidad una exportación con nombre por defecto, por lo que la exportación predeterminada se puede importar como:

import {default as Sample} from '../Sample.js';

Si piensas en import como solo azúcar de sintaxis para módulos de nodos, objetos y desestructuración, me parece bastante intuitivo.

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';

En orden a entender el uso de llaves en import declaraciones, en primer lugar, usted tiene que entender el concepto de destruir introducido en ES6

1. Desestructuración de objetos

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste
   

2. Matriz de desestructuración

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo
   

   Usando la coincidencia de lista

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout
   

   Usando el operador spread

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];
   

Ahora que tenemos que salir de nuestro camino, en ES6 puede exportar múltiples módulos. A continuación, puede hacer uso de la desestructuración de objetos como a continuación

Supongamos que tienes un módulo llamado module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

Desea importar las funciones exportadas a index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

También puede usar diferentes nombres de variables como so

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

Por lo general, cuando exporta una función, debe usar {}

if you have export const x 

Usted usa import {x} from ''

if you use export default const x 

Necesita usar import X from '' aquí puede cambiar X a cualquier variable que desee

Las llaves ({}) se utilizan para importar enlaces con nombre y el concepto detrás de él es la asignación de desestructuración

Una simple demostración de cómo funciona la instrucción import con un ejemplo se puede encontrar en mi propia respuesta a una pregunta similar en ¿Cuándo usamos '{ }' en las importaciones de javascript?