Maison >interface Web >js tutoriel >Accolades dans les importations de modules uniques ES6 : quand les utiliser et quand ne pas le faire ?

Accolades dans les importations de modules uniques ES6 : quand les utiliser et quand ne pas le faire ?

DDD
DDDoriginal
2024-12-25 21:22:15712parcourir

Curly Braces in ES6 Single Module Imports: When to Use Them and When Not To?

Quand utiliser des accolades pour les importations d'un seul module ES6

Dans ES6, l'utilisation d'accolades pour importer un seul module peut introduire un comportement inattendu. Pour clarifier quand utiliser et éviter les accolades, examinons la distinction entre les exportations par défaut et nommées.

Exportation par défaut

Lors de l'importation d'un seul module sans accolades, vous Nous importons essentiellement l'exportation par défaut. Les exportations par défaut sont déclarées comme :

export default <value>;

Dans l'exemple fourni, initialState.js contient une exportation par défaut pour l'objet initialState. Par conséquent, vous pouvez y accéder sans accolades :

import initialState from './todoInitialState';

Exportation nommée

Si vous devez importer une valeur exportée spécifique, vous devez utiliser des accolades. Les exportations nommées sont déclarées comme :

export const <identifier> = <value>;

Dans l'exemple TodoReducer.js, vous essayez d'accéder à la tâche nommée export :

import { todo } from './todoInitialState';

Utilisation d'accolades bouclées vs. Les éviter

La règle générale est d'utiliser des accolades lors de l'importation d'exportations nommées et de les éviter lors de l’importation des exportations par défaut. Voici une répartition résumée :

  • Utilisez des accolades :

    • Lors de l'importation d'une exportation nommée spécifique
  • Éviter les boucles accolades :

    • Lors de l'importation de l'exportation par défaut à partir d'un module avec une seule exportation par défaut
    • Lors de l'importation de plusieurs exportations à partir d'un module, qu'elles soient par défaut ou nommées exportations

Exemple

Considérons l'exemple suivant :

// A.js
export default MyComponent;
export const ChildComponent = () => {};

Pour importer ces exportations :

  • Exportation par défaut (MyComponent) :

    import MyComponent from './A';
  • Exportation nommée (ChildComponent) :

    import { ChildComponent } from './A';

Par en comprenant la différence entre les exportations par défaut et nommées, vous pouvez déterminer correctement quand utiliser des accolades pour les importations de modules uniques dans ES6.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn