Fonctions fléchées React ES6

Fonctions fléchées

Les fonctions fléchées nous permettent d'écrire une syntaxe de fonction plus courte :

hello = function() {
  return "Hello World!";
}

hello = () => {
  return "Hello World!";
}

ça devient plus court ! Si la fonction n'a qu'une seule instruction et que l'instruction renvoie une valeur, vous pouvez supprimer les crochets et le mot- returnclé :

hello = () => "Hello World!";

Si vous avez des paramètres, vous les passez entre parenthèses :

hello = (val) => "Hello " + val;

En fait, si vous n'avez qu'un seul paramètre, vous pouvez également ignorer les parenthèses :

hello = val => "Hello " + val;

Qu'en est-il this?

La manipulation de thisest également différente dans les fonctions fléchées par rapport aux fonctions régulières.

En bref, avec les fonctions fléchées, il n'y a pas de liaison de this.

Dans les fonctions régulières, le mot- thisclé représentait l'objet qui appelait la fonction, qui pouvait être la fenêtre, le document, un bouton ou autre.

Avec les fonctions fléchées, le mot- thisclé représente toujours l'objet qui a défini la fonction fléchée.

Prenons deux exemples pour comprendre la différence.

Les deux exemples appellent une méthode deux fois, d'abord lors du chargement de la page, puis une fois de plus lorsque l'utilisateur clique sur un bouton.

Le premier exemple utilise une fonction régulière et le deuxième exemple utilise une fonction fléchée.

Le résultat montre que le premier exemple renvoie deux objets différents (fenêtre et bouton) et que le deuxième exemple renvoie deux fois l'objet Header.

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Souvenez-vous de ces différences lorsque vous travaillez avec des fonctions. Parfois, le comportement des fonctions régulières est ce que vous voulez, sinon, utilisez les fonctions fléchées.

hello =  "Hello World!";