Verständnis des Rendering-Verhaltens in React

Zusammen mit dem Leben, dem Tod, dem Schicksal und den Steuern ist das Rendering-Verhalten von React eine der größten Wahrheiten und Geheimnisse des Lebens.

Lassen Sie uns eintauchen!

Wie jeder andere habe auch ich meine Reise in der Frontend-Entwicklung mit jQuery begonnen. Reine JS-basierte DOM-Manipulationen waren damals ein Alptraum, auch das machte jeder. Dann wurden JavaScript-basierte Frameworks langsam so bekannt, dass ich sie nicht mehr ignorieren konnte.

Das erste, was ich lernte, war Vue. Es fiel mir unglaublich schwer, denn Komponenten, Zustände und alles andere waren ein völlig neues Denkmodell, und es war sehr mühsam, alles unterzubringen. Aber schließlich schaffte ich es und klopfte mir auf die Schulter. Herzlichen Glückwunsch, Kumpel, sagte ich mir, du hast den steilen Aufstieg geschafft; jetzt wird der Rest des Frameworks, sollten Sie sie jemals lernen müssen, ganz einfach sein.

Als ich dann eines Tages anfing, React zu lernen, wurde mir klar, wie schrecklich falsch ich lag. Facebook hat die Dinge nicht einfacher gemacht, indem es Hooks einführte und jeden sagte: "Hey, benutzt das von nun an. Aber schreiben Sie die Klassen nicht um; Klassen sind in Ordnung. Eigentlich nicht so sehr, aber es ist in Ordnung. Aber Hooks sind alles, und sie sind die Zukunft.

Haben Sie das verstanden? Großartig!".

Schließlich habe ich auch diesen Berg überquert. Aber dann wurde ich mit etwas konfrontiert, das so wichtig und schwierig ist wie React selbst: Rendering.

Wenn Sie schon einmal mit Rendering und seinen Geheimnissen in React zu tun hatten, wissen Sie, wovon ich spreche. Und wenn nicht, haben Sie keine Ahnung, was auf Sie zukommt! 😂

Aber bevor Sie Zeit mit irgendetwas verschwenden, sollten Sie sich fragen, was Sie davon haben (im Gegensatz zu mir, der ich ein übereifriger Idiot bin und gerne alles nur um der Sache willen lerne 😭😭). Wenn Ihr Leben als React-Entwickler gut läuft, ohne dass Sie sich Gedanken darüber machen, was dieses Rendering ist, warum sollten Sie sich dann Gedanken machen? Gute Frage, also lassen Sie uns zuerst diese Frage beantworten und dann sehen wir uns an, was Rendering eigentlich ist.

Warum ist es wichtig, das Rendering-Verhalten in React zu verstehen?

Wir alle fangen an, React zu lernen, indem wir (heutzutage funktionale) Komponenten schreiben, die etwas namens JSX zurückgeben. Wir wissen auch, dass dieses JSX irgendwie in tatsächliche HTML-DOM-Elemente umgewandelt wird, die auf der Seite angezeigt werden. Die Seiten aktualisieren sich, wenn der Status aktualisiert wird, die Routen ändern sich wie erwartet, und alles ist in Ordnung. Aber diese Sichtweise der Funktionsweise von React ist naiv und eine Quelle vieler Probleme.

Zwar gelingt es uns oft, vollständige React-basierte Anwendungen zu schreiben, aber es kommt vor, dass wir bestimmte Teile unserer Anwendung (oder die gesamte Anwendung) bemerkenswert langsam finden. Und das Schlimmste daran ist, dass wir nicht die geringste Ahnung haben, warum! Wir haben alles richtig gemacht, wir sehen keine Fehler oder Warnungen, wir haben alle bewährten Praktiken des Komponentendesigns, der Codierungsstandards usw. befolgt, und hinter den Kulissen findet keine Verlangsamung des Netzwerks oder teure geschäftslogische Berechnungen statt. 🤔

Manchmal ist es ein ganz anderes Problem: Die Leistung ist in Ordnung, aber die Anwendung verhält sich seltsam. Zum Beispiel macht sie drei API-Aufrufe an das Authentifizierungs-Backend, aber nur einen an alle anderen. Oder einige Seiten werden zweimal neu gezeichnet, wobei der sichtbare Übergang zwischen den beiden Renderings der gleichen Seite eine störende UX erzeugt.

Das Schlimmste ist jedoch, dass in solchen Fällen keine externe Hilfe zur Verfügung steht. Wenn Sie in Ihrem bevorzugten Entwicklerforum diese Frage stellen, wird man Ihnen antworten: "Das kann ich nicht sagen, ohne mir Ihre Anwendung anzusehen. Können Sie ein funktionierendes Beispiel anhängen?" Natürlich können Sie aus rechtlichen Gründen nicht die gesamte App anhängen, während ein kleines funktionierendes Beispiel dieses Teils das Problem möglicherweise nicht enthält, da es nicht mit dem gesamten System interagiert, wie es in der eigentlichen App der Fall ist.

Beschissen? Ja, wenn Sie mich fragen. 🤭🤭

Wenn Sie auch nicht wollen, dass solche Tage des Jammers kommen, schlage ich vor, dass Sie ein Verständnis - und Interesse, darauf muss ich bestehen; ein widerwillig erworbenes Verständnis werden Sie in der Welt von React nicht weit bringen - für diese wenig verständliche Sache namens Rendering in React entwickeln. Glauben Sie mir, es ist gar nicht so schwer zu verstehen, und obwohl es sehr schwer zu meistern ist, kommen Sie sehr weit, ohne jeden Winkel kennen zu müssen.

Was bedeutet Rendering in React?

Das, mein Freund, ist eine ausgezeichnete Frage. Wir neigen nicht dazu, sie zu stellen, wenn wir React lernen (ich weiß das, weil ich es nicht getan habe), denn das Wort "rendern" uns vielleicht in ein falsches Gefühl der Vertrautheit einlullt. Auch wenn die Bedeutung im Wörterbuch eine völlig andere ist (und in dieser Diskussion keine Rolle spielt), haben wir Programmierer bereits eine Vorstellung davon, was es bedeuten sollte. Die Arbeit mit Bildschirmen, 3D-APIs, Grafikkarten und das Lesen von Produktspezifikationen schult unseren Verstand, wenn wir das Wort "Rendern" lesen, um etwas zu denken, das in etwa "ein Bild malen" bedeutet. In der Game-Engine-Programmierung gibt es einen Renderer, dessen einzige Aufgabe darin besteht, die Welt so zu malen, wie sie von der Scene übergeben wird.

Wir denken auch, wenn React etwas "rendert", sammelt es alle Komponenten ein und malt das DOM der Website neu. Aber in der React-Welt (und ja, auch in der offiziellen Dokumentation) geht es nicht um das Rendern. Also, schnallen wir uns an und tauchen wir tief in die React-Interna ein.

Sie haben sicher schon gehört, dass React ein so genanntes virtuelles DOM verwaltet, das regelmäßig mit dem tatsächlichen DOM verglichen wird und bei Bedarf Änderungen vornimmt (deshalb können Sie nicht einfach jQuery und React zusammen einsetzen - React muss die volle Kontrolle über das DOM übernehmen). Dieses virtuelle DOM besteht nicht aus HTML-Elementen wie das reale DOM, sondern aus React-Elementen. Worin besteht der Unterschied? Gute Frage! Warum erstellen Sie nicht eine kleine React-Anwendung und überzeugen sich selbst davon?

Zu diesem Zweck habe ich diese sehr einfache React-Anwendung erstellt. Der gesamte Code besteht nur aus einer einzigen Datei mit ein paar Zeilen:

importieren Sie React von "react";
import "./styles.css";

export default function App() {
 const element = (
 <div classname="App">
 <h1>Hallo, du!</h1>
 <h2>Lassen Sie uns einen Blick auf die React-Elemente werfen</h2>
 </div>
 );

 console.log(element);
 Element zurückgeben;
}

Haben Sie bemerkt, was wir hier tun?

Ja, wir protokollieren einfach, wie ein JSX-Element aussieht. Diese JSX-Ausdrücke und -Komponenten haben wir schon hunderte Male geschrieben, aber wir achten nur selten darauf, was dabei passiert. Wenn Sie die Dev-Konsole Ihres Browsers öffnen und diese Anwendung ausführen, sehen Sie ein Objekt, das sich auf erweitert:

Das mag einschüchternd aussehen, aber beachten Sie einige interessante Details:

• Es handelt sich um ein einfaches, normales JavaScript-Objekt und nicht um einen DOM-Knoten.
• Beachten Sie, dass die Eigenschaft props besagt, dass es einen className von App hat (das ist die CSS-Klasse, die im Code festgelegt wurde) und dass dieses Element zwei Kinder hat (auch das stimmt, denn die Kinderelemente sind die <h1> und <h2> Tags).
• Die Eigenschaft _source sagt uns, wo der Quellcode des Elements beginnt. Wie Sie sehen können, wird die Datei App.js als Quelle angegeben und die Zeile 6 erwähnt. Wenn Sie sich den Code noch einmal ansehen, werden Sie feststellen, dass Zeile 6 direkt nach dem öffnenden JSX-Tag steht, was durchaus Sinn macht. Die JSX-Klammern enthalten das React-Element; sie sind nicht Teil des Elements, da sie dazu dienen, später in einen React.createElement() -Aufruf umgewandelt zu werden.
• Die Eigenschaft __proto__ sagt uns, dass dieses Objekt alle seine Eigenschaften vom Root-JavaScript-Objekt ableitet, was wiederum die Idee unterstreicht, dass wir es hier mit ganz normalen JavaScript-Objekten zu tun haben.

Jetzt verstehen wir auch, dass das so genannte virtuelle DOM nicht wie das echte DOM aussieht, sondern ein Baum von React-Objekten (JavaScript) ist, die die Benutzeroberfläche zu diesem Zeitpunkt darstellen.

Erschöpft?

Glauben Sie mir, ich bin es auch 🙂 Es ist nicht einfach, diese Ideen in meinem Kopf immer und immer wieder umzudrehen, um sie so gut wie möglich zu präsentieren, und dann die richtigen Worte zu finden, um sie zu formulieren und neu anzuordnen. 😫

Aber wir lassen uns ablenken!

Nachdem wir bis hierher durchgehalten haben, können wir nun die Frage beantworten, die wir uns gestellt haben: Was ist Rendering in React?

Nun, Rendering ist der Prozess der React-Engine, der das virtuelle DOM durchläuft und den aktuellen Zustand, die Requisiten, die Struktur, die gewünschten Änderungen in der Benutzeroberfläche usw. erfasst. React aktualisiert nun das virtuelle DOM mithilfe einiger Berechnungen und vergleicht das neue Ergebnis mit dem tatsächlichen DOM auf der Seite. Dieses Berechnen und Vergleichen nennt das React-Team offiziell "Reconciliation". Wenn Sie sich für die Ideen und die entsprechenden Algorithmen interessieren, können Sie die offiziellen Dokumente einsehen.

Zeit, sich zu engagieren!

Sobald der Rendering-Teil abgeschlossen ist, beginnt React eine Phase namens "Commit", in der es die notwendigen Änderungen am DOM vornimmt. Diese Änderungen werden synchron angewendet (eine nach der anderen, obwohl ein neuer Modus, der gleichzeitig arbeitet, bald erwartet wird), und das DOM wird aktualisiert. Wann und wie genau React diese Änderungen vornimmt, ist nicht unsere Sache, denn das ist etwas, das sich unter der Haube abspielt und sich wahrscheinlich ständig ändern wird, wenn das React-Team neue Dinge ausprobiert.

Rendering und Leistung in React-Anwendungen

Wir haben inzwischen verstanden, dass Rendering bedeutet, Informationen zu sammeln, und dass dies nicht jedes Mal zu visuellen DOM-Änderungen führen muss. Wir wissen auch, dass das, was wir als "Rendering" bezeichnen, ein zweistufiger Prozess ist, der Rendering und Commit umfasst. Wir werden nun sehen, wie das Rendering (und vor allem das Re-Rendering) in React-Apps ausgelöst wird und wie die Unkenntnis der Details zu einer schlechten Performance von Apps führen kann.

Erneutes Rendering aufgrund einer Änderung der übergeordneten Komponente

Wenn sich eine übergeordnete Komponente in React ändert (z.B. weil sich ihr Zustand oder ihre Requisiten geändert haben), geht React den gesamten Baum bis zu diesem übergeordneten Element durch und rendert alle Komponenten neu. Wenn Ihre Anwendung viele verschachtelte Komponenten und viele Interaktionen hat, nehmen Sie unbewusst jedes Mal einen enormen Leistungseinbruch in Kauf, wenn Sie die übergeordnete Komponente ändern (vorausgesetzt, es ist nur die übergeordnete Komponente, die Sie ändern wollten).

Es stimmt zwar, dass React beim Rendern das eigentliche DOM nicht verändert, da es während des Abgleichs feststellt, dass sich an diesen Komponenten nichts geändert hat. Aber es wird trotzdem CPU-Zeit und Speicher verschwendet, und Sie werden überrascht sein, wie schnell sich das summiert.

Erneutes Rendern aufgrund einer Änderung des Kontexts

Die Context-Funktion von React scheint jedermanns Lieblingswerkzeug für die Zustandsverwaltung zu sein (wofür es eigentlich gar nicht entwickelt wurde). Es ist alles so bequem - Sie müssen nur die oberste Komponente in den Context-Provider einwickeln, und der Rest ist eine einfache Sache! Die meisten React-Anwendungen werden auf diese Weise erstellt, aber wenn Sie diesen Artikel bis hierher gelesen haben, haben Sie wahrscheinlich schon bemerkt, was falsch ist. Ja, jedes Mal, wenn das Kontextobjekt aktualisiert wird, löst es eine massive Neudarstellung aller Baumkomponenten aus.

Die meisten Anwendungen haben kein Leistungsbewusstsein, so dass es niemandem auffällt, aber wie bereits gesagt, können solche Versäumnisse in Anwendungen mit hohem Volumen und vielen Interaktionen sehr kostspielig sein.

Verbesserung der Rendering-Leistung von React

Was können wir also tun, um die Leistung unserer Anwendungen zu verbessern? Es gibt einige Dinge, die wir tun können, aber beachten Sie, dass wir dies nur im Zusammenhang mit funktionalen Komponenten erörtern werden. Von klassenbasierten Komponenten wird vom React-Team dringend abgeraten und sie sind auf dem Rückzug.

Verwenden Sie Redux oder ähnliche Bibliotheken für die Zustandsverwaltung

Diejenigen, die die Quick-and-Dirty-Welt von Context lieben, neigen dazu, Redux zu hassen, aber diese Sache ist aus guten Gründen sehr beliebt. Und einer dieser Gründe ist die Leistung - die connect() -Funktion in Redux ist magisch, da sie (fast immer) nur die Komponenten korrekt rendert, die notwendig sind. Ja, halten Sie sich einfach an die Standardarchitektur von Redux, und die Leistung kommt gratis. Es ist überhaupt nicht übertrieben, dass Sie die meisten Performance- (und andere) Probleme sofort vermeiden, wenn Sie die Redux-Architektur übernehmen.

Verwenden Sie memo() zum "Einfrieren" von Komponenten

Der Name "memo" kommt von Memoization, was ein schicker Name für Caching ist. Und wenn Sie noch nicht viel mit Caching zu tun hatten, ist das auch nicht weiter schlimm. Hier eine verwässerte Beschreibung: Jedes Mal, wenn Sie ein Berechnungs-/Operationsergebnis benötigen, suchen Sie an dem Ort, an dem Sie frühere Ergebnisse aufbewahrt haben; wenn Sie es finden, prima, dann geben Sie das Ergebnis einfach zurück; wenn nicht, dann führen Sie die Operation/Verarbeitung durch.

Bevor wir direkt in memo() eintauchen, lassen Sie uns zunächst sehen, wie unnötiges Rendering in React abläuft. Wir beginnen mit einem einfachen Szenario: ein winziger Teil der App-Benutzeroberfläche, der dem Benutzer anzeigt, wie oft ihm der Dienst/das Produkt gefallen hat (wenn Sie Schwierigkeiten haben, den Anwendungsfall zu akzeptieren, denken Sie daran, wie Sie auf Medium mehrfach "klatschen" können, um zu zeigen, wie sehr Sie einen Artikel unterstützen/lieben).

Es gibt auch eine Schaltfläche, mit der Sie die Anzahl der Likes um 1 erhöhen können. Und schließlich gibt es eine weitere Komponente, die den Nutzern ihre grundlegenden Kontodaten anzeigt. Machen Sie sich keine Sorgen, wenn Sie dem Ganzen nicht folgen können. Ich werde Ihnen Schritt für Schritt den Code für alles erklären (und das ist nicht viel) und am Ende einen Link zu einer Spielwiese angeben, auf der Sie mit der funktionierenden App herumspielen und Ihr Verständnis verbessern können.

Nehmen wir zunächst die Komponente für die Kundeninformationen in Angriff. Erstellen wir eine Datei namens CustomerInfo.js, die den folgenden Code enthält:

import React from "react";

export const CustomerInfo = () => {
 console.log("CustomerInfo wurde gerendert! :O");
 return (
 <React.Fragment>
 <p>Name: Sam Punia</p>
 <p>E-Mail: sampunia@gmail.com</p>
 <p>Bevorzugte Methode: Online</p>
 </React.Fragment>
 );
};

Nichts Ausgefallenes, richtig?

Nur etwas Informationstext (der über Props hätte übergeben werden können), der sich bei der Interaktion des Benutzers mit der Anwendung nicht ändern soll (für die Puristen da draußen: Ja, natürlich kann er sich ändern, aber der Punkt ist, dass er im Vergleich zum Rest der Anwendung praktisch statisch ist). Beachten Sie jedoch die Anweisung console.log(). Dies ist unser Hinweis darauf, dass die Komponente gerendert wurde (denken Sie daran, dass "gerendert" bedeutet, dass die Informationen gesammelt und berechnet/abgeglichen wurden, und nicht, dass sie auf das DOM gezeichnet wurde).

Wenn wir auch während unserer Tests keine solche Meldung in der Browserkonsole sehen, wurde unsere Komponente überhaupt nicht gerendert; wenn sie 10 Mal erscheint, bedeutet dies, dass die Komponente 10 Mal gerendert wurde usw.

Und nun wollen wir sehen, wie unsere Hauptkomponente diese Kundeninformationskomponente verwendet:

importieren Sie React, { useState } von "react";
import "./styles.css";
import { CustomerInfo } from "./CustomerInfo";

export default function App() {
 const [totalLikes, setTotalLikes] = useState(0);
 return (
 <div classname="App">
 <div classname="LikesCounter">
 <p>Sie haben uns bisher {totalLikes} mal gefallen.</p>
 <button onclick="{()" > setTotalLikes(totalLikes 1)}&gt;
 Klicken Sie hier, um uns erneut zu mögen!
       </button>
 </div>
 <div classname="CustomerInfo">
 <customerinfo />
 </div>
 </div>
 );
}

Wir sehen auch, dass die App-Komponente über einen internen Zustand verfügt, der über den useState()-Hook verwaltet wird. Dieser Zustand zählt, wie oft der Benutzer den Dienst/die Website geliked hat, und ist zunächst auf Null gesetzt. Keine große Herausforderung für eine React-App, oder? Auf der UI-Seite sehen die Dinge so aus:

Die Schaltfläche sieht zu verlockend aus, um sie nicht zu zerstören, zumindest für mich! Aber bevor ich das tue, öffne ich die Dev-Konsole meines Browsers und lösche sie. Danach drücke ich ein paar Mal auf die Schaltfläche, und das sehe ich dann:

Ich habe 19 Mal auf die Schaltfläche geklickt, und wie erwartet liegt die Gesamtzahl der Likes bei 19. Das Farbschema machte es wirklich schwer zu lesen, auch habe ich einen roten Kasten hinzugefügt, um das Wichtigste hervorzuheben: die <CustomerInfo /> Komponente wurde 20 Mal gerendert!

Warum 20 Mal?

Einmal, als alles ursprünglich gerendert wurde, und dann 19 Mal, als die Schaltfläche gedrückt wurde. Die Schaltfläche ändert sich totalLikeseinen Teil des Zustands innerhalb der <App />-Komponente, und infolgedessen wird die Hauptkomponente neu gerendert. Und wie wir in den früheren Abschnitten dieses Beitrags gelernt haben, werden auch alle Komponenten innerhalb der Komponente neu gerendert. Das ist unerwünscht, denn die <CustomerInfo /> Komponente hat sich dabei nicht verändert und dennoch zum Rendering-Prozess beigetragen.

Wie können wir das verhindern?

Genau wie der Titel dieses Abschnitts sagt, indem wir die Funktion memo() verwenden, um eine "konservierte" oder zwischengespeicherte Kopie der <CustomerInfo / >-Komponente zu erstellen. Bei einer memoisierten Komponente prüft React die Requisiten und vergleicht sie mit den vorherigen Requisiten. Wenn es keine Änderungen gibt, extrahiert React keine neue "Render"-Ausgabe aus dieser Komponente.

Fügen wir diese Codezeile zu unserer Datei hinzu CustomerInfo.js hinzu:

export const MemoizedCustomerInfo = React.memo(CustomerInfo);

Ja, das ist alles, was wir tun müssen! Jetzt ist es an der Zeit, dies in unserer Hauptkomponente zu verwenden und zu sehen, ob sich etwas ändert:

importieren Sie React, { useState } von "react";
import "./styles.css";
import { MemoizedCustomerInfo } from "./CustomerInfo";

export default function App() {
 const [totalLikes, setTotalLikes] = useState(0);
 return (
 <div classname="App">
 <div classname="LikesCounter">
 <p>Sie haben uns bisher {totalLikes} mal gefallen.</p>
 <button onclick="{()" > setTotalLikes(totalLikes 1)}&gt;
 Klicken Sie hier, um uns erneut zu mögen!
       </button>
 </div>
 <div classname="CustomerInfo">
 <memoizedcustomerinfo />
 </div>
 </div>
 );
}

Ja, es wurden nur zwei Zeilen geändert, aber ich wollte trotzdem die gesamte Komponente zeigen. An der Benutzeroberfläche hat sich nichts geändert. Wenn ich also die neue Version ausprobiere und ein paar Mal auf die Schaltfläche Gefällt mir klicke, erhalte ich das hier:

Wie viele Konsolenmeldungen haben wir auch?

Nur eine! Das bedeutet, dass die Komponente abgesehen vom anfänglichen Rendering überhaupt nicht verändert wurde. Stellen Sie sich den Leistungsgewinn bei einer wirklich großen Anwendung vor! Okay, okay, der Link zum Code-Spielplatz, den ich versprochen hatte, ist hier. Um das frühere Beispiel zu wiederholen, müssen Sie CustomerInfo anstelle von MemoizedCustomerInfo aus CustomerInfo.js importieren und verwenden.

Davon abgesehen ist memo() kein magischer Sand, den Sie überall verstreuen können und magische Ergebnisse erwarten können. Auch ein übermäßiger Einsatz von memo() kann zu trickreichen Fehlern in Ihrer Anwendung führen und manchmal auch einfach dazu, dass einige erwartete Aktualisierungen fehlschlagen. Der allgemeine Ratschlag zur "verfrühten" Optimierung gilt auch hier. Bauen Sie Ihre Anwendung zunächst so auf, wie es Ihre Intuition sagt. Führen Sie dann ein intensives Profiling durch, um zu sehen, welche Teile langsam sind, und wenn sich herausstellt, dass memoisierte Komponenten die richtige Lösung sind, führen Sie diese erst dann ein.

"Intelligentes" Komponentendesign

Ich setze "intelligent" in Anführungszeichen, weil: 1) Intelligenz ist höchst subjektiv und situationsabhängig; 2) vermeintlich intelligente Handlungen haben oft unangenehme Konsequenzen. Mein Rat für diesen Abschnitt lautet also: Seien Sie nicht zu selbstbewusst bei dem, was Sie tun.

Eine Möglichkeit, die Rendering-Leistung zu verbessern, besteht darin, Komponenten etwas anders zu gestalten und zu platzieren. Zum Beispiel kann eine untergeordnete Komponente umgestaltet und an eine höhere Stelle in der Hierarchie verschoben werden, um erneute Rendervorgänge zu vermeiden. Es gibt keine Regel, die besagt, dass die Komponente ChatPhotoView immer innerhalb der Komponente Chat liegen muss. In besonderen Fällen (und das sind Fälle, in denen wir datengestützte Beweise dafür haben, dass die Leistung beeinträchtigt wird) kann es tatsächlich eine gute Idee sein, die Regeln zu beugen oder zu brechen.

Fazit

Es kann noch viel mehr getan werden, um React-Anwendungen im Allgemeinen zu optimieren, aber da sich dieser Artikel mit dem Rendering befasst, habe ich den Umfang der Diskussion eingeschränkt. Unabhängig davon hoffe ich, dass Sie jetzt einen besseren Einblick in die Vorgänge unter der Haube von React haben, was Rendering eigentlich ist und wie es die Anwendungsleistung beeinflussen kann.

Lassen Sie uns als nächstes verstehen, was React Hooks sind?