web-dev-qa-db-fra.com

React crochets USESTE SETVALUE RÉGUER encore une fois de plus lorsque la valeur est égale

J'ai un exemple de code ci-dessous:

function App() {
  console.log("render");
  const [val, setVal] = React.useState(0);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => setVal(12)}>Update with same value</button>
    </div>
  );
}

Lorsque je clique sur un bouton plusieurs fois, la console enregistre 3 fois avec le message "Render". Pour moi, cela devrait être 2 fois seulement:

  • 1 pour le premier rendu

  • 2 Pour la mise à jour de VAL 0 à 12 (lorsque vous cliquez sur le bouton)

et depuis cette heure, il ne devrait pas rendu car la même valeur (12) est mise à jour à Val.

Mais pourquoi il apparaît 3 fois? Cela signifie qu'il restitue encore une fois de plus malgré la même valeur que la même valeur a été mise à jour.

Quiconque connaissez s'il vous plaît expliquer cela, merci d'avance.

P/S: J'ai compris que cela provoque seulement une rendu supplémentaire lorsque la valeur modifiée a été mise à jour avec la même chose.

function App() {
  console.log("render");
  const [val, setVal] = useState(4);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => {
        setVal(val => val + 1)
      }}>Update</button>
      <button onClick={() => {
        setVal(val => val)
      }}>Update with same value</button>
    </div>
  );
}

Lorsque vous cliquez pour la première fois sur le bouton 2ND, aucun appel re-rendu, mais si vous cliquez sur le 1er bouton, puis sur 2ème bouton, 2ème bouton provoque 1 re-rendu supplémentaire

javascriptreactjsfrontendreact-hooks
6
Quoc Van Tang

Ce fil peut vous aider: réagir: re-rendu sur le réglage de l'état - crochets vs.Sistate

En outre, vous pouvez vérifier le deuxième paragraphe sur ici qui dit:

Notez que =React peut-il encore avoir besoin de rendre à nouveau ce composant spécifique avant de sortir. Cela ne devrait pas être une préoccupation car React ne va pas inutilement "plus loin "Dans l'arbre. Si vous faites des calculs coûteux pendant le rendu, vous pouvez les optimiser avec Usememo.

2
Yash Joshi

Réagir Je ne peux pas deviner que la sortie de rendu () ne changera pas: elle doit redevenir () encore et comparer les résultats avec le rendu précédent ().

Ensuite, la magie se produit: S'il n'y a pas de différence, le DOM n'est pas mis à jour; S'il y a des différences, il essaie de créer/détruire/détruire uniquement des éléments, car c'est la partie coûteuse, pas en cours de rendu () - Eh bien, cela ne devrait pas être.

Changer l'État déclenche normalement un appel à Render () (pas nécessairement des modifications DOM) - mais si vous souhaitez contrôler ce comportement, définissez shouldComponentUpdate.

Remarque: cela va pour les composants sans crochet. Cependant, je ne connaissais pas le comportement de hameçons était légèrement différent de celui d'un composant régulier: il semble que vous avez raison dans l'attente de setState ne pas déclencher un rendu lorsque le La valeur est inchangée - voir la réponse de Yash Joshi.

3
hugo