Wie ich mich an React Collocation erinnere
Wenn ich React- Komponenten baue , verwirrt mich das ungewollte erneute Rendern. Einige Komponenten werden ohne meine Absichten neu gerendert.
Ich habe jedoch einen Trick gelesen, um die unerwünschten Probleme beim erneuten Rendern zu reduzieren, nicht die besten Tipps, aber sehr nützlich, es heißt Colocation . Was ist das? Soweit ich weiß, besteht das Hauptkonzept darin, den Zustand so nah wie möglich an der Komponente zu verwenden, die ihn verwendet.
Eintauchen
Lass uns eintauchen, ich erstelle 3 super einfache Komponenten,
- App.js (als übergeordnetes Element ),
- FirstChild.js (als erstes Kind),
- und SecondComponent.js (als zweites Kind).
Das obige Bild zeigt, dass alle Komponenten gerendert werden, auch das <SecondChild /> , das den Zustand nicht verwendet.
Was wir wollen, ist nicht die Komponente zu rendern, die den Zustand nicht verwendet . Wir verwenden den Zustand nur beim <FirstChild /> . Wie können wir das machen? Durch Verschieben des Zustands so nah wie möglich an die Komponente verwendet es. Also lasst uns den obigen Code verbessern, indem wir den Zustand nach innen verschieben
<App />
<Erstes Kind /> :
und lassen Sie die <SecondComponent/> unverändert.
Ergebnis
Auch hier wird beim ersten Rendern erwartet, dass alle Komponenten gerendert werden.
Jetzt lass uns die Eingabe noch einmal eingeben
siehst du die unterschiede? Wir geben 5 Buchstaben ein und rendern nur das Konsolenprotokoll im <FirstChild/> ! Das <SecondChild/> rendert jedoch überhaupt nicht neu
Wieso den?
Denken Sie daran, dass React die Komponente und alle darin enthaltenen untergeordneten Elemente neu rendert, wenn sich der Status oder die Requisite(n) ändern . Im ersten Beispiel oben haben wir den Zustand an der übergeordneten Komponente platziert. Wenn wir also eingegeben haben, wurde er auch gerendert, wenn untergeordnete Komponenten vorhanden waren, die den Zustand nicht verwendeten, da der übergeordnete Zustand geändert wurde.
Basierend auf dieser Theorie haben wir den Zustand auf die einzige Komponente verschoben, die ihn verwendet. Dadurch änderte sich der Zustand nur innerhalb des <FirstChild />, ohne das <SecondChild /> und das Elternteil zu beeinflussen.
Einfache Tipps, aber hilfreich. 👌
Verweise:
- https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster
- https://kentcdodds.com/blog/colocation
Suggested posts
Informationen zu Domänennamen finden
Ein Auszug aus Small, Sharp Software Tools von Brian P. Hogan
Wenn Sie eine Anfrage an facebook.com stellen, sucht Ihr Computer nach dem Domänennamen, um diesen in eine IP-Adresse zu übersetzen, damit Ihr Computer diese Verbindung herstellen kann.
Die verheerenden Folgen eines Schlaganfalls vermeiden: Aus der Reise einer Familie lernen.
Einleitung Ein Schlaganfall ist ein medizinischer Notfall, der jeden jederzeit treffen kann. Sie tritt auf, wenn die Durchblutung eines Teils des Gehirns gestört ist, was zu einem plötzlichen Verlust der Gehirnfunktion führt.
Related posts
Schaffung einer sicheren Arbeitsumgebung
„Er wird mich beschützen, wenn ich in Gefahr bin. Er wird mich in seinem Zelt verstecken.
Sammeln von OSINT für die Bedrohungssuche
Hallo, Cyber-Enthusiasten! Willkommen zurück bei der OSINT-Serie zur Bedrohungsjagd. Im ersten Artikel habe ich Ihnen einen Überblick über OSINT und seine Bedeutung bei der Bedrohungsjagd gegeben.
3 bewährte Möglichkeiten, Ihre Schreibfähigkeiten zu verbessern
Die Vorteile des Schreibens und Strategien, die Ihnen dabei helfen
Im Jahr 2022, mit der Veröffentlichung von GPT-3, scheinen Schreibfähigkeiten an Bedeutung zu verlieren. Mit KI können auch Menschen mit schlechten Schreibkenntnissen hochwertiges Personal hervorbringen.