UTILISATION DES FERMES JAVASCRIPT DANS REACT

Une Closure est une fonctionnalité Javascript dans laquelle une fonction, enfermée dans une autre fonction (fonction externe), est renvoyée et invoquée en dehors de la fonction externe.

Une fermeture est formée lorsque la fonction interne maintient l'accès à une variable en dehors de sa portée, c'est-à-dire portée lexicale ; accès aux variables et aux arguments de la fonction externe même après l'exécution de la fonction externe.

Créons une fonction de fermeture du calculateur de taxes pour calculer les taxes sur les boissons alcoolisées et non alcoolisées en fonction de leurs taux de taxation.

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

Comme vous pouvez le voir, chaque boisson se souviendra toujours de son taux de taxe selon qu'il s'agit d'une boisson alcoolisée ou non alcoolisée, c'est-à-dire que la fonction renvoyée est invoquée en dehors de taxCalculator et est capable de récupérer la valeur du paramètre tva même si le principal la fonction taxCalculator a été exécutée.

Dans React js, bibliothèque d'interface utilisateur JavaScript, les gestionnaires d'événements sont déclarés en ligne sur le JSX en tant que tels.

<button  onClick={handleClick}>Click me</button> 

Si le gestionnaire d'événements a un argument, il sera alors invoqué dans une fonction en tant que telle.

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 ">
  { actions.map(action => 
<button 
className="w-full md:w-60" 
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
onClick={()=>handleAction(action)}>{action}</button>)}
  </div>)
}

Notez que handleAction est encapsulé par une fonction de flèche lors de son attribution au gestionnaire d'événements onclick.

Avec la fermeture, nous pouvons simplement appeler handleAction avec un argument d'action, puis renvoyer une fonction interne qui récupère l'argument d'action et exécute le reste des actions comme ceci.

function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    <div className="flex flex-col md:flex-row  w-full p-4 gap-4 justify-between">
      {actions.map((action) => (
        <button 
className="w-full md:w-60"
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
 onClick={handleAction(action)}>
          {action}
        </button>
      ))}
    </div>
  );
}

Remarquez comment nous invoquons handleAction directement sur l'événement OnClick ? remarquez également que nous avons refactorisé la fonction handleAction afin qu'elle renvoie une fonction effectuant les actions nécessaires avec un commutateur ?

Le handleAction est invoqué lors du montage du composant, une fermeture se produit lorsque la fonction renvoyée par handleAction saisit et conserve la valeur de l'argument sur handleAction même si celui-ci (handleAction) est exécuté lors du premier rendu.
C'est une manière intéressante de gérer les événements en Javascript. Qu'en pensez-vous ?

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!