React: Unerwarteter Funktionskomponentenaufruf mit useState

Erstellt am 20. Dez. 2019 · 3Kommentare · Quelle: facebook/react

Möchten Sie eine Funktion anfordern oder einen Fehler melden?

Frage

Wie ist das aktuelle Verhalten?

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);

In diesem Zählbeispiel gibt es zwei Schaltflächen. Wenn Sie auf einen klicken, zählt die Zählung +1, bei einer anderen ändert sich die Zählung nicht. Wenn Sie zuerst auf die Schaltfläche Keine Änderung klicken, wird "Rendern" nicht protokolliert. Wenn Sie jedoch zuerst auf die Schaltfläche +1 klicken und dann auf anthor klicken, wird "Render" zweimal angezeigt, aber ""Child render" wird nur einmal angezeigt.

Ich habe die Erklärung im Dokument gefunden.

Wenn Sie einen State Hook auf denselben Wert wie den aktuellen Status aktualisieren, wird React aussteigen, ohne die untergeordneten Elemente zu rendern oder Effekte auszulösen. (React verwendet den Object.is-Vergleichsalgorithmus.)

Verspricht React nur, dass die Kinderkomponente in dieser Situation nicht gerendert wird? Die aktuelle Komponente kann noch gerendert werden?

Dies ist ein Beispiel in der Sandbox.

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

Welche React-Versionen und welche Browser/Betriebssysteme sind von diesem Problem betroffen?

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

Question

Quelle

yqz0203

Hilfreichster Kommentar

Dieses Problem sieht nicht nach einem "Fehler" aus, sondern eher nach einer Klärungsfrage? :Lächeln:

Der nächste Absatz unter dem Abschnitt der Dokumente, auf die Sie verwiesen haben, sagt Folgendes:

Beachten Sie, dass React diese spezifische Komponente möglicherweise noch einmal rendern muss, bevor Sie aussteigen können. Das sollte kein Problem sein, da React nicht unnötig „tiefer“ in den Baum eindringt.

Reagieren Sie frühzeitig aus, wenn es weiß, dass es sicher ist. In einigen Fällen muss es etwas mehr Arbeit leisten, um sicherzustellen, dass die Rettung sicher ist.

Die Gründe dafür können nicht erklärt werden, ohne ziemlich tief in die aktuellen Implementierungsdetails einzugehen – was wahrscheinlich nicht so nützlich wäre und sie werden sich wahrscheinlich in einer kommenden Version ändern, während wir weiter an neuen APIs wie dem gleichzeitigen Modus arbeiten und Spannung.

Die gute Nachricht ist, wie in den Dokumenten erwähnt, der zusätzliche Arbeitsaufwand von React sollte in beiden Fällen gering sein!

bvaughn am 20. Dez. 2019

👍2

Alle 3 Kommentare

Dieses Problem sieht nicht nach einem "Fehler" aus, sondern eher nach einer Klärungsfrage? :Lächeln:

Der nächste Absatz unter dem Abschnitt der Dokumente, auf die Sie verwiesen haben, sagt Folgendes:

Beachten Sie, dass React diese spezifische Komponente möglicherweise noch einmal rendern muss, bevor Sie aussteigen können. Das sollte kein Problem sein, da React nicht unnötig „tiefer“ in den Baum eindringt.

Reagieren Sie frühzeitig aus, wenn es weiß, dass es sicher ist. In einigen Fällen muss es etwas mehr Arbeit leisten, um sicherzustellen, dass die Rettung sicher ist.

Die gute Nachricht ist, wie in den Dokumenten erwähnt, der zusätzliche Arbeitsaufwand von React sollte in beiden Fällen gering sein!

bvaughn am 20. Dez. 2019

👍2

Dieses Problem sieht nicht nach einem "Fehler" aus, sondern eher nach einer Klärungsfrage? 😄
Der nächste Absatz unter dem Abschnitt der Dokumente, auf die Sie verwiesen haben, sagt Folgendes:
Beachten Sie, dass React diese spezifische Komponente möglicherweise noch einmal rendern muss, bevor Sie aussteigen können. Das sollte kein Problem sein, da React nicht unnötig „tiefer“ in den Baum eindringt.
Reagieren Sie frühzeitig aus, wenn es weiß, dass es sicher ist. In einigen Fällen muss es etwas mehr Arbeit leisten, um sicherzustellen, dass die Rettung sicher ist.
Die Gründe dafür können nicht erklärt werden, ohne ziemlich tief in die aktuellen Implementierungsdetails einzugehen - was wahrscheinlich nicht so nützlich wäre _und_ sie werden sich wahrscheinlich in einer kommenden Version ändern, wenn wir weiter an neuen APIs wie dem gleichzeitigen Modus arbeiten und Spannung.
Die gute Nachricht ist, wie in den Dokumenten erwähnt, der zusätzliche Arbeitsaufwand von React sollte in beiden Fällen gering sein!

Thx, was für ein sorgloser Mann! 😁

yqz0203 am 23. Dez. 2019

Kein Problem! 😄

bvaughn am 25. Dez. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

React: Unerwarteter Funktionskomponentenaufruf mit useState

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen