Suivez combien de fois un composant a été rendu à l'aide de useRef() - React

Pensons d'abord à toutes les façons dont un débutant essaie d'aborder cela.

Pour suivre si vous le souhaitez, créez un nouveau projet React et mettez autant de code dans votre App.jsx ou n'importe quel composant de votre choix et supprimez également tout de index.css et App.css :

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

Il sera prévisualisé comme ceci maintenant :

Dans le code ci-dessus, j'ai créé une variable d'état nommée count qui s'incrémente de 1 en cliquant sur le bouton. Le décompte ici est une variable d'état supplémentaire qui ne fait rien ici mais cela vous aidera à mieux comprendre les choses. Ce code ne devrait pas vous submerger si vous avez déjà codé dans React.

Alors passons à la partie principale...

1. Utilisation de la variable d'état

C'est la première approche qui vient à l'esprit de la plupart d'entre nous, comme créer une variable d'état en l'initialisant avec 0 et en l'incrémentant de 1 à chaque fois que le composant est rendu.

Votre composant d'application ressemblera à ceci :

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

Cette approche fonctionnera bien ici mais elle présente de nombreux défauts. Idéalement, le composant n'effectue pas le rendu une seule fois lorsque nous cliquons sur le bouton Forcer le rendu. Lorsque nous cliquons sur le bouton, la valeur du compte s'incrémente de 1, ce qui entraîne le nouveau rendu du composant, car nous savons tous que le changement dans n'importe quelle variable d'état entraîne le nouveau rendu d'un composant. Mais cela se termine ici après qu'un nouveau rendu par setCount(count 1), setNumberOfTimesRendered(numberOfTimesRendered 1) sera déclenché et entraînera un nouveau rendu du composant.

La valeur numberOfTimesRendered s'incrémente de 1, mais chaque fois que nous cliquons sur le bouton Forcer le rendu, le composant effectue un rendu deux fois, ce qui montre pourquoi l'utilisation de la variable d'état pour ce type de problème n'est pas la meilleure mais la pire approche ici.

2. Utilisation d'une variable globale

Une autre approche à laquelle on peut penser consiste à définir une variable globale en dehors du cycle de vie du composant et à l'incrémenter de 1 lors du nouveau rendu du composant, comme ceci :

let numberOfTimesRendered = 0;

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

Cette approche fonctionnera bien et ne provoque aucun rendu supplémentaire et cela semble être la meilleure solution pour cela, mais ce n'est pas le cas car vous ne devez rien définir en dehors du cycle de vie des composants.

3. Utilisation d'une variable locale

On peut aussi penser à la même approche que ci-dessus mais avec une variable locale à l'intérieur du composant mais laissez-moi vous dire qu'il n'y a pas de pire approche que celle-ci car à chaque fois que le composant rend la variable locale se réinitialise à 0 et nous perdrons à chaque fois la trace des rendus précédents.

4. Utilisation du crochet useRef()

Maintenant, implémentons cela en utilisant useRef().

Comme la plupart d'entre nous le savent, useRef est un hook permettant de référencer des éléments à l'intérieur du dom et de les manipuler manuellement, mais useRef ne se limite pas à cela. Il peut également contenir des valeurs et peut être utilisé pour conserver une variable persistante tout au long du cycle de vie du rendu des composants.

Si vous stockez une valeur dans useRef, elle ne sera pas affectée par le cycle de vie du rendu du composant React, la valeur restera persistante quel que soit le nombre de rendus. La mise en œuvre ressemblera à ceci :

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

numberOfTimesRendered.current donne la valeur actuelle stockée dans la variable de référence. Cette approche ne provoque aucun rendu supplémentaire, ne disant pas que c'est la meilleure mais l'une des approches les plus optimales à ma connaissance.

---

Cela conclut cet article. Ouvert aux commentaires et si vous avez besoin de précisions supplémentaires, veuillez commenter ci-dessous et je ferai de mon mieux pour vous aider.

Connectez-vous avec moi sur X et LinkedIn !?✨

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!