4 häufige Fehler bei der Verwendung von React to Avoid

Sie sollten wissen, dass Sie keine weiteren Probleme in Ihre Codebasis werfen sollten

React ist heutzutage eine großartige Bibliothek. Dies erleichtert das Erstellen schöner und reibungsloser Webanwendungen.

Wenn Sie dies jedoch nicht bemerken, treten häufig Fehler auf, die Ihr Projekt später belasten.

Lassen Sie uns ohne weiteres genau wissen, welche Fehler Sie bei der Verwendung von React vermeiden sollten.

1. Erstellen Sie Superman-Komponenten

Superman -Komponenten sind Komponenten, die viele Dinge tun können.

Ich habe diese Art von Komponente einmal von meinem Kollegen erlebt. Er fügte viele nicht verwandte UI-Blöcke in eine Komponente ein. Dann benutzte er eine Eigenschaft, um die Anzeige für jeden Block zu steuern. Etwas wie wenn viewId = 0 , dann zeige view_0 .

Vielleicht denken Sie zuerst, dass es bequem ist. Wenn das Projekt jedoch wächst, wird es bald zu einem Chaos. Ganz zu schweigen davon, dass es einige Zeit dauern wird, um zu untersuchen, wann Probleme auftreten.

Eine Komponente sollte sich nur auf eine Sache konzentrieren. Geben Sie der Wiederverwendbarkeit und Skalierbarkeit nicht zu viel Leistung, um viele Aufgaben zu erledigen.

Sie sollten beispielsweise die Fähigkeit von NavBarComponent zur Navigation in der Leiste einschränken. Nicht verwandte andere Funktionen sollten entfernt werden. Auf diese Weise können Sie es überall wiederverwenden, wo Sie es benötigen.

Seien Sie nicht faul, indem Sie alle Funktionen in einer einzigen Komponente zusammenfassen. Nehmen Sie sich Zeit, um zu überlegen, wie Ihre gewünschte Komponente aussehen soll, und gestalten Sie sie so einzigartig wie möglich. Diese einzigartigen Komponenten sind einfacher zu warten und arbeiten im gesamten zusammensetzbaren System gut zusammen.

BlockOne-Komponente:

BlockTwo-Komponente:

BlockThree-Komponente:

2. Pass Nummern als Strings

Sehen Sie sich die folgende Komponente an:

Wir verwenden die Eigenschaft gender als Zahl, um das Geschlecht zu bestimmen. 0 für männlich , 1 für weiblich und alles, was von 0 und abweicht 1 für Andere .

Verwenden wir jetzt die Komponente UserDetails irgendwo:

Sie erwarten, dass das Geschlecht männlich ist, dies ist jedoch nicht der Fall. Weil Sie 0 als Zeichenfolge und nicht als Zahl übergeben. Der tatsächliche Wert ist also Andere .

Um dies zu beheben, verwenden Sie geschweifte Klammern, wenn Sie Zahlen als Requisiten übergeben:

3. Ändern Sie den Status direkt

Einer der häufigsten Fehler, den Anfänger machen, ist die direkte Änderung des Status. So:

Sie ändern den Status direkt und das React-System weiß nichts davon. Daher wird das erneute Rendern möglicherweise nicht ausgelöst.

Der Reaktionszustand sollte unveränderlich sein. Wenn Sie versuchen, es direkt zu ändern, können Fehler oder unerwartete Verhaltensweisen auftreten, z. B. wenn die Benutzeroberfläche im obigen Beispiel nicht neu gerendert wird.

Anstatt den Status direkt zu ändern, sollten Sie setState () verwenden. Es wird React sagen: “Hey Mann, ich werde gleich etwas ändern. Bitte sei dir dessen bewusst. “ Dann bereitet React alles vor, um die Änderung korrekt durchzuführen.

4. Verwenden Sie den Wert des Status direkt nach setState ()

Können Sie auf das Problem des obigen Snippets hinweisen?

avatarVisibility wird direkt nach der Aktualisierung durch setState () verwendet.

Warum ist das ein Problem?

Dies ist ein subtiler Fehler, den Sie möglicherweise nicht bemerken, aber setState () funktioniert asynchron.

Wenn Sie zum Aktualisieren einer Eigenschaft setState () verwenden, wird die Änderung möglicherweise nicht sofort angewendet. Aus diesem Grund kann die Verwendung einer Eigenschaft direkt nach der Aktualisierung zu unerwartetem Verhalten führen.

Sie können dieses Problem jedoch mit dem zweiten Parameter von setState()

lösen

Wenn Sie die Rückruffunktion verwenden, funktioniert Ihre Berechnung genau, da diese Rückruffunktion aufgerufen wird, nachdem der Status aktualisiert wurde.

Schlussfolgerung

Oben sind die häufigsten Fehler aufgeführt, die Sie wahrscheinlich bei der Arbeit mit React machen. Ich hoffe, dieser Artikel hilft Ihnen dabei, alle zu vermeiden, um sicherzustellen, dass alles perfekt funktioniert.

Weiterführende Literatur

Weitere hilfreiche Einblicke in die Programmierung erhalten Sie von mir.