React: Appel de composant de fonction inattendu à l'aide de useState

Créé le 20 déc. 2019 · 3Commentaires · Source: facebook/react

Vous souhaitez demander une fonctionnalité ou signaler un bug ?

question

Quel est le comportement actuel ?

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Child() {
  console.log("Child render");
  return null;
}

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

  console.log("Render");

  useEffect(() => {
    console.log("count changed", count);
  }, [count]);

  return (
    <div>
      <h2>UseState</h2>
      <p>clicked: {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          setCount(count);
        }}
      >
        +0
      </button>
      <Child />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Il y a deux boutons dans cet exemple de comptage. Cliquer sur l'un fait compter +1, un autre ne compte pas de changement. Si vous cliquez d'abord sur le bouton Pas de changement, "Render" ne sera pas enregistré. Mais si vous cliquez d'abord sur le bouton +1, puis sur anthor, "Render" s'affichera deux fois, mais ""Child render" ne s'affichera qu'une seule fois.

J'ai trouvé l'explication dans le document.

Si vous mettez à jour un State Hook à la même valeur que l'état actuel, React renverra sans rendre les enfants ni déclencher les effets. (React utilise l'algorithme de comparaison Object.is.)

React promet-il seulement que le composant Children ne sera pas rendu dans cette situation ? Le composant actuel peut encore être rendu ?

Ceci est un exemple dans le bac à sable.

https://codesandbox.io/s/long-firefly-nz5px?fontsize=14&hidenavigation=1&theme=dark

Quelles versions de React et quel navigateur/OS sont concernés par ce problème ?

"react": "^16.12.0",
"react-dom": "^16.12.0",

Question

Source

yqz0203

Commentaire le plus utile

Ce problème ne ressemble pas tant à un "bug" qu'à une question de clarification ? :le sourire:

Le paragraphe suivant sous la section des documents que vous avez référencés dit ceci :

Notez que React peut encore avoir besoin de restituer ce composant spécifique avant de renflouer. Cela ne devrait pas être un problème car React n'ira pas "plus profondément" inutilement dans l'arbre.

React se sauve tôt quand il sait qu'il est sûr de le faire. Dans certains cas, il doit faire un peu plus de travail pour s'assurer qu'il est sûr de renflouer.

Les raisons pour lesquelles cela ne peut pas être expliqué sans entrer assez profondément dans les détails de l'implémentation actuelle - ce qui ne serait probablement pas si utile et ils sont susceptibles de changer dans une prochaine version alors que nous continuons à travailler sur de nouvelles API comme le mode concurrent et suspense.

La bonne nouvelle est, comme le mentionnent les documents, que la quantité de travail supplémentaire que React effectue dans les deux cas devrait être faible !

bvaughn le 20 déc. 2019

👍2

Tous les 3 commentaires

Ce problème ne ressemble pas tant à un "bug" qu'à une question de clarification ? :le sourire:

Le paragraphe suivant sous la section des documents que vous avez référencés dit ceci :

Notez que React peut encore avoir besoin de restituer ce composant spécifique avant de renflouer. Cela ne devrait pas être un problème car React n'ira pas "plus profondément" inutilement dans l'arbre.

React se sauve tôt quand il sait qu'il est sûr de le faire. Dans certains cas, il doit faire un peu plus de travail pour s'assurer qu'il est sûr de renflouer.

La bonne nouvelle est, comme le mentionnent les documents, que la quantité de travail supplémentaire que React effectue dans les deux cas devrait être faible !

bvaughn le 20 déc. 2019

👍2

Ce problème ne ressemble pas tant à un "bug" qu'à une question de clarification ? ??
Le paragraphe suivant sous la section des documents que vous avez référencés dit ceci :
Notez que React peut encore avoir besoin de restituer ce composant spécifique avant de renflouer. Cela ne devrait pas être un problème car React n'ira pas "plus profondément" inutilement dans l'arbre.
React se sauve tôt quand il sait qu'il est sûr de le faire. Dans certains cas, il doit faire un peu plus de travail pour s'assurer qu'il est sûr de renflouer.
Les raisons pour lesquelles cela ne peut pas être expliqué sans entrer assez profondément dans les détails de l'implémentation actuelle - ce qui ne serait probablement pas si utile _et_ ils sont susceptibles de changer dans une prochaine version alors que nous continuons à travailler sur de nouvelles API comme le mode concurrent et du suspense.
La bonne nouvelle est, comme le mentionnent les documents, que la quantité de travail supplémentaire que React effectue dans les deux cas devrait être faible !

Thx, quel homme négligent ! ??

yqz0203 le 23 déc. 2019

Pas de soucis! ??

bvaughn le 25 déc. 2019

Cette page vous a été utile?

0 / 5 - 0 notes