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
Libérer: 2024-12-25 21:22:15
original
708 Les gens l'ont consulté

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>;
Copier après la connexion

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';
Copier après la connexion

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>;
Copier après la connexion

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

import { todo } from './todoInitialState';
Copier après la connexion

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 = () => {};
Copier après la connexion

Pour importer ces exportations :

  • Exportation par défaut (MyComponent) :

    import MyComponent from './A';
    Copier après la connexion
  • Exportation nommée (ChildComponent) :

    import { ChildComponent } from './A';
    Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal