Quand dois-je utiliser des parenthèses ou des accolades dans les fonctions fléchées de l'ES6 ?

Utilisation de parenthèses ou d'accolades dans les fonctions fléchées

Dans ES6, les fonctions fléchées fournissent une syntaxe concise pour définir les fonctions. Cependant, une confusion courante est l'utilisation de parenthèses ou d'accolades après la grosse flèche (=>).

Retour à valeur unique : parenthèses

Les parenthèses sont utilisées lorsque la fonction flèche renvoie une valeur unique, telle que :

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

Dans cet exemple, la fonction flèche renvoie un élément JSX. Puisqu'il s'agit d'un seul élément, des parenthèses sont utilisées.

Code à lignes multiples : accolades

Les accolades sont requises lorsque la fonction flèche exécute plusieurs lignes de code :

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

Ici, la fonction flèche effectue plusieurs opérations, elle utilise donc des boucles bouclées accolades.

Ambiguïté avec JSX

Les parenthèses dans l'exemple suivant peuvent sembler déroutantes car elles utilisent JSX :

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

Bien qu'il semble utilisez plusieurs lignes, JSX est en fait compilé en un seul élément, c'est pourquoi les parenthèses sont utilisé.

Autres exemples

Pour plus de clarté, voici quelques exemples supplémentaires :

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

Ces fonctions renvoient toutes le même résultat, démontrant le flexibilité d'utiliser des parenthèses ou des accolades en fonction du nombre de lignes exécutées.

Éviter l'analyseur Confusion

Les parenthèses peuvent également être utilisées autour des littéraux d'objet pour éviter que l'analyseur ne les traite comme des blocs de code :

const x = () => {} // Does nothing
const y = () => ({}) // Returns an object

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!