React.js: Auswahl der Staatsstruktur

Wenn dir meine Artikel gefallen, kannst du mir einen Kaffee kaufen oder ihn teilen :)

---

In diesem Artikel werden wir die wichtigen Punkte bei der Auswahl der Zustandsstruktur in unseren react.js-Projekten untersuchen.

---

Wahl der Staatsstruktur

Wenn wir eine Reaktionskomponente schreiben, müssen wir entscheiden, wie viele Zustände in der Komponente vorhanden sein sollen und wie wir diese Zustände verwenden. Zum Beispiel haben wir beim Schreiben einer Komponente drei Zustände verwendet und unsere Komponente funktioniert ordnungsgemäß. Sie haben jedoch bemerkt, dass Sie dieselbe Komponente mit drei Zuständen schreiben können. Daher Sie müssen sich für die Staatsstruktur entscheiden.

---

Ich werde über 5 Prinzipien sprechen, die Ihnen helfen sollen, bei der Auswahl der Staatsstruktur bessere Entscheidungen zu treffen.

1. Gruppieren Sie die zugehörigen Statusvariablen

Denken Sie an eine Figur in einem Computerspiel, diese Figur kann sich in x- und y-Koordinaten bewegen. Wenn Sie also diese x- und y-Werte als Zustand schreiben möchten, wie würden Sie das tun?

• Schlechter Ansatz :

• Besserer Ansatz :

Technisch gesehen können Sie beide Ansätze verwenden. Aber ** Wenn Sie immer zwei oder mehr Statusvariablen gleichzeitig aktualisieren, sollten Sie erwägen, sie in einer einzigen Statusvariablen zusammenzuführen**.

Und wenn Sie nicht wissen, wie viele Zustände Sie benötigen, können Sie die Zustände mithilfe eines Objekts oder eines Arrays gruppieren.

---

2. Vermeiden Sie Widersprüche im Staat.

Denken Sie an eine Messaging-App. Sie wissen, dass es zwei verschiedene Phasen gibt, in denen Sie die Genehmigung zum Senden einer Nachricht erteilen. Das erste ist „Nachricht wird gesendet“ und das zweite ist „Nachricht wurde gesendet“. Was würde uns also als Erstes in den Sinn kommen, wenn wir diese zwei Zustände als zwei verschiedene Zustände deklarieren würden, wahr und falsch?

• Schlechter Ansatz (Konfliktrisiko) :

Da isSending und isSent nie gleichzeitig wahr sein sollten, ist es besser, sie durch eine Status-Zustandsvariable zu ersetzen, die einen von drei gültigen Zuständen annehmen kann: „Eintippen“, „Senden“ und „Gesendet“

• Besserer Ansatz :

---

3. Vermeiden Sie einen redundanten Zustand

Bei der Auswahl der Zustandsstruktur einer Komponente benötigen Sie Folgendes: Wenn Sie einige Informationen aus den Requisiten oder vorhandenen Zustandsvariablen der Komponente berechnen können, sollten Sie dies nicht tun Behalten Sie diese Informationen im Zustand der Komponente bei.

• Schlechter Ansatz:

• Besserer Ansatz :

** Wenn Sie setFirstName oder setLastName aufrufen, lösen Sie ein erneutes Rendern aus, und dann wird der nächste vollständige Name aus den neuen Daten berechnet.**

---

Abschluss

Eine gute Strukturierung des Status stellt sicher, dass Sie über Komponenten verfügen, die leicht zu ändern und zu debuggen sind. In diesem Artikel habe ich über drei Prinzipien gesprochen, die bei der Auswahl der Staatsstruktur berücksichtigt werden sollten. Möglicherweise gibt es noch mehr dieser Prinzipien. Wenn Sie möchten, können Sie in den Kommentaren über diese Grundsätze sprechen.

Das obige ist der detaillierte Inhalt vonReact.js: Auswahl der Staatsstruktur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!