Best Practices zur Implementierung einfacher Jira-Projekte mit React+TS

Eine Reihe von Projekten für die Ausbildung
reagieren+ts
Obwohl der Inhalt geringer ist, gibt es viel Trockenware, insbesondere die Kapselung von Hooks, das Verständnis von TS-Generika und die Verwendung des Projektcodes der nächsten Ebene: https://gitee.com/fine509/react_jiar

Rendern

Dies sind die drei Hauptseiten und einige kleine Details

usw.

Einige erwähnenswerte Punkte (es werden nur die allgemeinen Funktionen besprochen, keine spezifischen Details zu ihrer Verwendung)

Verwenden Sie die Fehlergrenzenverarbeitung und getDerivedStateFromError, um die Fehlerkomponente anzuzeigen, anstatt aufzuhängen, wenn irgendwo auf einer Seite ein Fehler auftritt.

Verwendung von useSearchParams

Diese API kann unsere Parameter hier abrufen und festlegen.

Verwendung von react-query

Die Bibliothek wird online als Statusverwaltungsbibliothek zur Verwaltung serverseitiger Daten vorgestellt. Sie scheint Redux ein wenig ähnlich zu sein, erfordert aber nicht das Schreiben vieler Aktionen und Reduzierer. Sie unterstützt asynchrone Anforderungen, verwendet Schlüssel zur eindeutigen Identifizierung von Daten und hat einen ähnlichen Platz wie eine globale Statusverwaltungsbibliothek. Es eignet sich besonders für bestimmte Tabellen, beispielsweise zum Hinzufügen, Löschen, Ändern und Überprüfen, und unterstützt auch optimistische Aktualisierungen. Die Idee ist, dass Sie beispielsweise beim Hinzufügen, Löschen, Ändern und Überprüfen von Daten die Originaldaten direkt zum Zeitpunkt des Sendens der Daten abrufen können. Durch den von Ihnen selbst geschriebenen Logikcode können Sie die Daten nach dem Hinzufügen, Löschen, Ändern und Überprüfen abrufen und dann direkt auf der Seite rendern. Es sieht so aus, als ob es direkt aktualisiert wurde, aber tatsächlich wird es zuerst gerendert und dann sendet der Hintergrund selbst die Anforderung. Wenn dies fehlschlägt, können Sie auch die Originaldaten abrufen und erneut auf der Seite rendern und dann den Fehler melden. Der letzte Punkt, der mich bei diesem Projekt besonders gestört hat, war das Datenmanagement.

Ich habe zunächst selbst einen Haken eingekapselt.

Meine Idee ist, dass eine Seite möglicherweise viele Daten abrufen muss, sodass es sehr mühsam ist, Loading selbst zu schreiben. Es gibt mehrere, warum kann Loading nicht einheitlich verwaltet werden? Legen Sie dann Daten als Objekt fest. Wenn Sie es verwenden, können Sie einen Typ übergeben, um den Typ Ihrer Daten zu definieren.

Anschließend wird sendHttp zum Senden von Daten verwendet

Akzeptiert zwei Parameter. Der zweite Parameter ist das Datenattribut, in das die aktuellen Daten eingefügt werden sollen.

Die Wirkung der Nutzung ist

Auf diese Weise kann der Status dieser Daten einheitlich verwaltet werden, später stellte ich jedoch fest, dass die Verwendung sehr mühsam war. Also habe ich es wieder aufgegeben. Es ist bequemer, nativ zu schreiben. Definieren Sie einfach die Schnittstelle direkt.

Direkte Verwendung

Natürlich habe ich auch daran gedacht, Redux zu verwenden, aber für Redux müssen Aktionen und Reduzierer geschrieben werden, was ebenfalls sehr umständlich ist.
Kürzlich habe ich von einem Freund gehört, dass Ahooks‘ Usequest auch gut ist, also werde ich es in meinem nächsten Projekt ausprobieren.

Das Wichtigste, was ich aus diesem Projekt gelernt habe, ist die Kapselung verschiedener Hooks

Redux einkapseln

Kapselungsanforderung

Es gibt auch das Studium von ts,

Wenn Sie eine API nicht verstehen, klicken Sie einfach auf die Typdefinition.

Wenn Du so etwas nicht verstehst, klicke Dich einfach ein und klicke die einzelnen Schritte durch.

Bei diesem Bombardement werden Sie langsam den Einsatz von Generika verstehen.

Dies ist das Ende dieses Artikels über die Implementierung eines einfachen Jira-Projekts mit react+ts. Weitere relevante Inhalte zu react+ts Jira-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!