In diesem Artikel werden wir die Verwendung von ReactDOM.unstable_batchedUpdates in einem Testfall untersuchen, insbesondere in Zustand, einer beliebten Zustandsverwaltungsbibliothek für React. Wir werden den Test auch aufschlüsseln und erklären, wie Batch-Updates die Leistung in React verbessern, indem sie unnötige Neu-Renderings minimieren.

Den Testfall verstehen

Hier ist der Testfall, den wir untersuchen werden:

Dieser Testfall wurde geschrieben, um zu überprüfen, ob Batch-Updates angewendet werden können, wenn Zustand mit dem Rendering-System von React verwendet wird.

Aufschlüsselung des Testfalls

1. Einrichtung des Zustandsspeichers: Der erste Schritt besteht darin, einen Zustandsspeicher mit der Erstellungsfunktion zu erstellen:

const useBoundStore = create(
  (set) => ({   
  count: 0,   
  inc: () => set((state) => ({ count: state.count   1 })), }))

Hier behält der Speicher einen einfachen Zustand mit einer auf 0 initialisierten Count-Eigenschaft und einer Inc-Funktion zum Erhöhen der Anzahl bei. Die Set-Funktion ist die Art und Weise, wie Zustand den Zustand aktualisiert, ähnlich wie setState in React.

2. Counter-Komponente: Die Counter-Komponente verwendet useBoundStore, um die aktuelle Anzahl und die Inc-Funktion abzurufen:

const { count, inc } = useBoundStore()

Diese Komponente abonniert den Status des Stores und alle Änderungen an der Zählung führen dazu, dass sie mit dem neuen Wert neu gerendert wird.

3. Verwenden von ReactDOM.unstable_batchedUpdates für Leistung: Innerhalb des useEffect-Hooks wird die Inc-Funktion innerhalb eines ReactDOM.unstable_batchedUpdates-Blocks zweimal aufgerufen:

useEffect(() => {   
  ReactDOM.unstable_batchedUpdates(() => {     
    inc()     
    inc()   
  }) 
}, [inc])

Hier passiert die Magie. Normalerweise würde jeder Aufruf von inc() eine separate Aktualisierung auslösen, was zwei Renderings zur Folge hätte. Durch das Einschließen dieser Aufrufe in unstable_batchedUpdates ist React jedoch in der Lage, sie zusammen in einem einzigen Update zu verarbeiten, was zu nur einem Rendering führt. Dadurch wird die Leistung optimiert, indem die Anzahl der Renderings reduziert wird, was besonders bei leistungskritischen Anwendungen nützlich ist.

4. Die Komponente rendern und das Ergebnis bestätigen Schließlich wird die Komponente gerendert und der Test wartet darauf, dass die Anzahl 2 erreicht:

const { findByText } = render(
       
    >, 
)  

await findByText('count: 2')

Diese Behauptung stellt sicher, dass die Anzahl nach zwei Inkrementen korrekt aktualisiert und als „Anzahl: 2“ gerendert wird.

Was ist ReactDOM.unstable_batchedUpdates?

ReactDOM.unstable_batchedUpdates ist eine von React bereitgestellte Methode, die die Verarbeitung mehrerer Statusaktualisierungen in einem einzigen Renderzyklus ermöglicht. Standardmäßig stapelt React Aktualisierungen, die innerhalb von Ereignishandlern (z. B. Klickereignissen) ausgelöst werden. Wenn Sie also mehrere Zustände als Reaktion auf eine Benutzerinteraktion aktualisieren, rendert React die Komponente nur einmal. Außerhalb von Ereignishandlern (wie innerhalb von setTimeout oder useEffect) werden Aktualisierungen jedoch nicht automatisch gestapelt.

Aber das hat sich nach React 18 geändert. Nachfolgend finden Sie die Screenshots, die aus „react.dev“ ausgewählt wurden

Beachten Sie, dass in der Dokumentation darauf hingewiesen wird, dass Aktualisierungen innerhalb von Zeitüberschreitungen, Versprechen, nativen Ereignishandlern oder anderen Ereignissen auf die gleiche Weise gestapelt werden wie Aktualisierungen innerhalb von React-Ereignissen. Aber im Testfall dieses Zustands werden Batch-Updates innerhalb von „useEffect“ angewendet. Hier wird unstable_batchedUpdates nützlich. Es zwingt React dazu, mehrere Statusaktualisierungen in einem einzigen Rendering zu gruppieren, auch außerhalb ereignisgesteuerter Kontexte, wodurch erneute Renderings minimiert und die Leistung verbessert werden.

Beispiel:

Ohne unstable_batchedUpdates:

inc()  // triggers one render
inc()  // triggers another render

Mit unstable_batchedUpdates:

ReactDOM.unstable_batchedUpdates(() => {
  inc()  // triggers only one render for both updates
  inc()
})

Die Methode wird als „instabil“ bezeichnet, da sie nicht Teil der offiziellen öffentlichen API von React ist, aber in der Community immer noch häufig zur Leistungsoptimierung verwendet wird. Möglicherweise wird es in Zukunft stabiler oder integrierter als Teil der neuen gleichzeitigen Rendering-Funktionen von React.

Unterhaltsame Tatsache: Die Version 4.5.5 von Zustand verwendet die Version – 19.0.0-rc.0

Warum ReactDOM.unstable_batchedUpdates im Zustand verwenden?

Zustand ist eine schlanke Zustandsverwaltungsbibliothek, die mit dem Komponentenlebenszyklus von React arbeitet. Obwohl Zustand Statusaktualisierungen effizient verarbeitet, löst das Reaktivitätssystem von React jedes Mal Renderings aus, wenn sich der Status ändert. In Szenarien, in denen mehrere Statusänderungen in einem kurzen Zeitraum auftreten, kann die Verwendung von ReactDOM.unstable_batchedUpdates mehrere erneute Renderings verhindern und die Aktualisierungen stapelweise durchführen, was eine reibungslosere und effizientere Benutzererfahrung ermöglicht.

Im bereitgestellten Testfall stellt der zweimalige Aufruf von inc innerhalb eines Batch-Updates sicher, dass die Zählung nur einmal aktualisiert wird, was es effizienter macht, als jedes Update einzeln auszuführen.

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die fortgeschrittenen Codebasis-Architekturkonzepte zu vermitteln, die in Open-Source-Projekten verwendet werden.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, lernen Sie die Best Practices kennen und erstellen Sie Projekte in Produktionsqualität.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Verbessern Sie die Fähigkeiten Ihres Teams mit unseren Fortgeschrittenenkursen basierend auf der Codebasis-Architektur. Kontaktieren Sie uns unter [email protected], um mehr zu erfahren!

Referenzen:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L175C7-L175C39

2. https://dev.to/devmoustafa97/do-you-know-unstablebatchedupdates-in-react-enforce-batching-state-update-5cn2

3. https://dev.to/jackbuchananconroy/react-18-what-s-changed-automatic-batching-13ec

4. https://react.dev/blog/2022/03/08/react-18-upgrade-guide#automatic-batching

5. https://github.com/pmndrs/zustand/blob/v4.5.5/package.json#L246C4-L247C32