React: Warum wird das Standardverhalten von useEffect bei jedem Rendering ausgeführt?

Durch das API-Design:

useEffect(
    () => {
        // do something
    },
    [/* dependency list */]
);

useEffect wird nur ausgeführt, wenn sich die Abhängigkeitsliste ändert, und ein leeres Array [] bedeutet keine Abhängigkeit (dh wird nur einmal ausgeführt). Es erscheint mir logisch, dass eine undefinierte Abhängigkeitsliste bedeutet, dass die Funktion useEffect jedem Rendering von

Ich kann mir nicht viele (irgendwelche) Muster vorstellen, bei denen Sie useEffect bei jedem Rendering ausführen möchten. Was war der Grund dafür, nicht einmal nicht ausgeführt zu werden?

Angenommen, Sie kennen React noch nicht und möchten immer dann etwas tun, wenn sich eine useState Variable ändert (zB den neuen Wert an einen Server POST).

• Mit dem aktuellen Verhalten würden Sie denselben Wert mehrmals POST, aber Sie würden nie verpassen, einen geänderten Wert zu posten.
• Mit dem von Ihnen vorgeschlagenen Verhalten würde nur der anfängliche Wert/die erste Änderung gepostet, und weitere Änderungen würden den useEffect Rückruf nicht auslösen.

Ich denke, die Abhängigkeitsliste soll eher eine Leistungsoptimierung / Hilfe zur Codevereinfachung sein.

Mit der aktuellen API können Sie zwischen den folgenden Verhaltensweisen entscheiden:

• Führen Sie den Effekt jedes Mal aus. Dies ahmt das Verhalten der alten Klasse componentDidMount + componentDidUpdate .
• Führen Sie den Effekt nur einmal aus. Dies ahmt das alte Verhalten von componentDidMount .
• Führen Sie den Effekt nur aus, wenn sich die Abhängigkeiten ändern. Dies ist etwas neu, obwohl Sie dasselbe mit den Komponenten this.props und prevProps in der Klassenkomponenten-API implementieren konnten (und oft taten).

Das von Ihnen beschriebene "Standardverhalten" (wenn Sie die Abhängigkeiten nicht explizit angeben) ist oft das sicherste, da es verhindert, dass veraltete Werte in Closures verwendet werden .

In Zukunft werden wir hoffentlich einen Compilertyp bereitstellen, der dabei hilft, vieles davon zu automatisieren. In der Zwischenzeit stellen wir ein offizielles ESLint-Plug-In zur Verfügung, um es ein wenig einfacher zu machen. 😄