Als ich heute ein komplexeres Formular schrieb, stieß ich auf einen Nebeneffekt, der durch die Wiederverwendung von Reaktionskomponenten verursacht wurde. Notieren Sie ihn daher.
Die Seite sieht so aus:
Dies ist ein Formular zum Rendern/Bearbeiten von Rohstoffpreisen. Die spezifische Logik ist kompliziert, daher habe ich das Formular aufgeteilt. Die Hauptfunktion ist wie folgt:
- Wählen Sie oben die Verkaufsregion des Produkts aus und wählen Sie unten die Region aus, um die entsprechende Preistabelle zu generieren.
- Das obige Formular zur Batch-Einstellung des Verkaufspreises kann die Formularinformationen aller unten aufgeführten Preistabellen stapelweise festlegen.
- Geben Sie den Massenpreis ein, berechnen Sie automatisch den Bruttogewinn und berechnen Sie den Musterpreis.
- ........Die Geschäftslogik ist zu kompliziert, daher werde ich nicht einzeln auf Details eingehen.
Das Geschäftsszenario ist komplizierter, daher habe ich die folgende Tabelle extrahiert und eine RenderPriceTable geschrieben, um die darin enthaltene Logik zu verarbeiten.
Ich habe die RenderPriceTable-Komponente mit der oben ausgewählten großflächigen Datenkarte gerendert und die von der Komponente benötigten Werte über Requisiten übergeben. Dann habe ich es gemäß dem normalen Prozess ausprobiert und festgestellt, dass es kein Problem gibt. Wie folgt habe ich eine große hinzugefügt Bereich und die Daten werden normal angezeigt:
Löschen Sie die großen Bereiche nacheinander von hinten, die folgende Tabelle wird ebenfalls dynamisch verkleinert und die Datenwiedergabe erfolgt normal
Wenn ich jedoch nicht der normalen Reihenfolge folge, den großen Bereich von der Mitte ändere oder die Reihenfolge umkehre, wird es Probleme bei der Darstellung der Tabelle unten geben. Ich habe zum Beispiel die Wuhan-Region zwischen der Guangdong-Region und der Harbin-Region gelöscht. Zu diesem Zeitpunkt war die Anzahl der Tabellen unten eine weniger, aber es gab einen Fehler in den Daten darin. Die Tabelle in der Harbin-Region wurde neu gerendert Gelöschte Region Wuhan. Gebietsdaten wie folgt:
Zu diesem Zeitpunkt dachte ich an den Schlüssel in React. Wenn die Karte RenderPriceTable generiert, werden die IDs verschiedener Regionen als Schlüssel der RenderPriceTable-Komponente verwendet:
Wenn ich auf diese Weise den oben ausgewählten großen Bereich ändere, kann die Tabelle unten auch der Änderung normal entsprechen und die korrekten Daten rendern.
Ich kannte die Rolle des Reaktionsschlüssels schon immer, aber ich war nicht sehr beeindruckt und verwende sie nicht oft. Dieses Mal wurde mir das wirklich klar, weil die Geschäftslogik, die Seiten und die entsprechenden Datenstrukturen komplizierter sind kleine Details. Sehr wichtig. Fassen Sie also die Rolle des Schlüssels bei der Reaktion zusammen und vertiefen Sie Ihren Eindruck.
Damit der Diff-Algorithmus in React besser funktioniert, muss der Schlüsselwert in React seine Einzigartigkeit und Stabilität gewährleisten. Das Schlüsselattribut in React ist ein spezielles Attribut, das nicht für Entwickler, sondern für den eigenen Gebrauch von React mit dem Schlüsselattribut angezeigt wird , kann eine entsprechende Beziehung mit der Komponente hergestellt werden. React verwendet den Schlüssel, um die Komponente zu identifizieren, was eine Art Identität darstellt. Jeder Schlüssel entspricht einer Komponente, und derselbe Schlüssel reagiert wie dieselbe Komponente, sodass nachfolgende Komponenten, die demselben Schlüssel entsprechen, nicht erstellt werden. Wenn die Renderfunktion ausgeführt wird, werden das alte und das neue virtuelle DOM verglichen. Wenn die beiden Elemente unterschiedliche Schlüssel haben, werden sie in den beiden Renderings davor und danach als unterschiedliche Elemente betrachtet und das alte Element wird zu diesem Zeitpunkt zerstört . , das neue Element wird erstellt. Wenn ein eindeutiger Identifikationsschlüssel bereitgestellt wird, der derselbe Schlüssel ist und der Elementtyp derselbe ist, aktualisiert React bei einer Änderung des Elementattributs nur das entsprechende Attribut der Komponente. In diesem Fall ist der Leistungsaufwand relativ gering.
Weitere Informationen finden Sie auf der offiziellen Website von React: Coordination – React