Fonction flèche sans accolades

Question

Je suis nouveau dans ES6 et React et je continue à voir des fonctions de flèche. Pourquoi certaines fonctions fléchées utilisent-elles des accolades après la grosse flèche et certaines utilisent-elles des parenthèses? Par exemple:

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

contre.

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

Merci pour toute aide!

Answer 1

Les parenthèses sont retournant une valeur unique, les accolades sont de l'exécution de plusieurs lignes de code.

Votre exemple ressemble à confusion, car c'est à l'aide de JSX qui ressemble à plusieurs "lignes", mais vraiment juste compilé en un seul "élément".

Voici quelques exemples de plus que tous la même chose:

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

Vous aussi, vous vous voyez souvent des parenthèses autour de l'objet littéraux parce que c'est un moyen d'éviter l'analyseur de le traiter comme un bloc de code:

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

Answer 2

Vous pouvez également utiliser des accolades pour empêcher une fonction de flèche à une seule ligne de renvoyer une valeur - ou pour indiquer au développeur suivant qu’une fonction de flèche à une seule ligne ne doit pas, dans ce cas, renvoyer quoi que ce soit.

Par exemple:

 const myFunc = (stuff) => { someArray.push(stuff) }
const otherFunc = (stuff) => someArray.push(stuff)

console.log(myFunc())    // --> logs undefined
console.log(otherFunc()) // --> logs result of push which is new array length
 

Answer 3

En fait, dans une mallette, lorsque quelqu'un utilise des accolades dans une déclaration de fonction de flèche, la valeur est la suivante:

 const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };
 

Answer 4

Dans ton premier exemple, le côté droit de la flèche en fonction affiche une expression unique qui est fermée par un groupement d'opérateur:

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

Un semblable cas comparable serait le suivant:

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

Une distinction, dans le cas ci-dessus à l'aide de simples expressions, c'est que le côté droit est la valeur renvoyée par la fonction.

D'autre part, si vous utilisez des accolades, JavaScript va comprendre que comme une déclaration:

const foo = (params) => {} // this is not an object being returned, it's just an empty statement 

Donc, à l'aide de déclaration est un bon début pour vous d'avoir le code, sur plusieurs lignes, et il nécessite l'utilisation de "retour" si la fonction est destinée à valeur de retour:

const foo = (params) => {
    let value = 1; 
    return value;
}

Au cas où vous vouliez retourner un objet vide dans la forme la plus courte:

const foo = (params) => ({}) 

Voir les tests