Komponenten rein halten

Einige JavaScript-Funktionen sindrein.Reine Funktionen führen nur eine Berechnung durch und nichts weiter. Indem Sie Ihre Komponenten strikt nur als reine Funktionen schreiben, können Sie eine ganze Klasse verwirrender Bugs und unvorhersehbaren Verhaltens vermeiden, wenn Ihre Codebasis wächst. Um diese Vorteile zu nutzen, müssen Sie jedoch einige Regeln befolgen.

Reinheit: Komponenten als Formeln

In der Informatik (und insbesondere in der Welt der funktionalen Programmierung) isteine reine Funktioneine Funktion mit den folgenden Eigenschaften:

• Sie kümmert sich um ihre eigenen Angelegenheiten.Sie ändert keine Objekte oder Variablen, die existierten, bevor sie aufgerufen wurde.
• Gleiche Eingaben, gleiche Ausgabe.Bei gleichen Eingaben sollte eine reine Funktion immer das gleiche Ergebnis zurückgeben.

Sie kennen vielleicht bereits ein Beispiel für reine Funktionen: Formeln in der Mathematik.

Betrachten Sie diese mathematische Formel:y= 2x.

Wennx= 2, dann isty= 4. Immer.

Wennx= 3, dann isty= 6. Immer.

Wennx= 3, wirdynicht manchmal9oder–1oder2.5sein, abhängig von der Tageszeit oder dem Zustand des Aktienmarktes.

Wenny= 2xundx= 3, wirdy immer 6sein.

Wenn wir dies in eine JavaScript-Funktion umwandeln, würde sie so aussehen:

Im obigen Beispiel istdoubleeinereine Funktion.Wenn Sie ihr3übergeben, gibt sie6zurück. Immer.

React ist um dieses Konzept herum aufgebaut.React geht davon aus, dass jede Komponente, die Sie schreiben, eine reine Funktion ist.Das bedeutet, dass React-Komponenten, die Sie schreiben, bei gleichen Eingaben immer das gleiche JSX zurückgeben müssen:

Wenn Siedrinkers={2}anRecipeübergeben, gibt es JSX zurück, das2 Tassen Wasserenthält. Immer.

Wenn Siedrinkers={4}übergeben, gibt es JSX zurück, das4 Tassen Wasserenthält. Immer.

Genau wie eine mathematische Formel.

Sie können sich Ihre Komponenten als Rezepte vorstellen: Wenn Sie sie befolgen und während des Kochvorgangs keine neuen Zutaten einführen, erhalten Sie jedes Mal das gleiche Gericht. Dieses „Gericht“ ist das JSX, das die Komponente React zumRendern

Illustriert vonRachel Lee Nabors

Nebeneffekte: (un)beabsichtigte Konsequenzen

Der Rendering-Prozess von React muss immer rein sein. Komponenten sollten nur ihr JSXzurückgebenund keine Objekte oder Variablenändern, die vor dem Rendering existierten – das würde sie unrein machen!

Hier ist eine Komponente, die diese Regel bricht:

Diese Komponente liest und schreibt eineguestVariable, die außerhalb von ihr deklariert ist. Das bedeutet, dassdas mehrfache Aufrufen dieser Komponente unterschiedliches JSX erzeugen wird!Und was noch schlimmer ist: WennandereKomponentenguestlesen, werden auch sie unterschiedliches JSX erzeugen, abhängig davon, wann sie gerendert wurden! Das ist nicht vorhersehbar.

Zurück zu unserer Formely= 2x: Selbst wennx= 2ist, können wir nicht darauf vertrauen, dassy= 4ist. Unsere Tests könnten fehlschlagen, unsere Benutzer wären verwirrt, Flugzeuge würden vom Himmel fallen – Sie können sich vorstellen, wie das zu verwirrenden Fehlern führen würde!

Sie können diese Komponente beheben, indem Sieguest stattdessen als Prop übergeben:

Jetzt ist Ihre Komponente rein, da das von ihr zurückgegebene JSX nur von derguest-Prop abhängt.

Im Allgemeinen sollten Sie nicht erwarten, dass Ihre Komponenten in einer bestimmten Reihenfolge gerendert werden. Es spielt keine Rolle, ob Siey= 2xvor oder nachy= 5xaufrufen: Beide Formeln werden unabhängig voneinander aufgelöst. Auf die gleiche Weise sollte jede Komponente nur „für sich selbst denken“ und nicht versuchen, während des Renderings mit anderen zu koordinieren oder von ihnen abzuhängen. Rendern ist wie eine Schulprüfung: Jede Komponente sollte ihr JSX selbst berechnen!

Lokale Mutation: Das kleine Geheimnis Ihrer Komponente

Im obigen Beispiel bestand das Problem darin, dass die Komponente einebereits bestehendeVariable während des Renderings änderte. Dies wird oft als„Mutation“bezeichnet, um es etwas bedrohlicher klingen zu lassen. Reine Funktionen mutieren keine Variablen außerhalb des Funktionsbereichs oder Objekte, die vor dem Aufruf erstellt wurden – das würde sie unrein machen!

Es ist jedochvöllig in Ordnung, Variablen und Objekte zu ändern, die Siegerade erstwährend des Renderings erstellt haben.In diesem Beispiel erstellen Sie ein[]Array, weisen es einercupsVariable zu undpushendann ein Dutzend Tassen hinein:

Wenn diecupsVariable oder das[]Array außerhalb derTeaGatheringFunktion erstellt worden wären, wäre das ein riesiges Problem! Sie würden einbereits bestehendesObjekt ändern, indem Sie Elemente in dieses Array schieben.

Es ist jedoch in Ordnung, weil Sie siewährend desselben Renderings, innerhalb vonTeaGathering, erstellt haben. Kein Code außerhalb vonTeaGatheringwird jemals davon erfahren. Dies wird als„lokale Mutation“bezeichnet – es ist wie das kleine Geheimnis Ihrer Komponente.

Wo Sie Nebenwirkungenverursachen können

Während die funktionale Programmierung stark auf Reinheit setzt, muss sich irgendwann, irgendwoetwasändern. Das ist ja schließlich der Sinn der Programmierung! Diese Änderungen – das Aktualisieren des Bildschirms, das Starten einer Animation, das Ändern von Daten – werdenNebenwirkungengenannt. Sie sind Dinge, die„nebenbei“passieren, nicht während des Renderings.

In Reactgehören Nebenwirkungen normalerweise inEvent-Handler.Event-Handler sind Funktionen, die React ausführt, wenn Sie eine Aktion ausführen – zum Beispiel, wenn Sie auf einen Button klicken. Auch wenn Event-HandlerinnerhalbIhrer Komponente definiert sind, laufen sie nichtwährenddes Renderings!Daher müssen Event-Handler nicht rein sein.

Wenn Sie alle anderen Optionen ausgeschöpft haben und keinen passenden Event-Handler für Ihre Nebenwirkung finden, können Sie sie trotzdem mit einemuseEffect-Aufruf in Ihrer Komponente an das zurückgegebene JSX anhängen. Dies teilt React mit, es später, nach dem Rendering, auszuführen, wenn Nebenwirkungen erlaubt sind.Dieser Ansatz sollte jedoch Ihre letzte Wahl sein.

Versuchen Sie, wenn möglich, Ihre Logik allein durch Rendering auszudrücken. Sie werden überrascht sein, wie weit Sie damit kommen!

Zusammenfassung

• Eine Komponente muss rein sein, das bedeutet:
  • Sie kümmert sich um ihre eigenen Angelegenheiten.Sie sollte keine Objekte oder Variablen verändern, die vor dem Rendern existierten.
  • Dieselben Eingaben, dieselbe Ausgabe.Bei denselben Eingaben sollte eine Komponente immer dasselbe JSX zurückgeben.
• Das Rendern kann jederzeit erfolgen, daher sollten Komponenten nicht von der Rendering-Reihenfolge anderer Komponenten abhängen.
• Du solltest keine der Eingaben mutieren, die deine Komponenten für das Rendern verwenden. Dazu gehören Props, State und Context. Um den Bildschirm zu aktualisieren, solltest du den State„setzen“, anstatt bestehende Objekte zu mutieren.
• Versuche, die Logik deiner Komponente im zurückgegebenen JSX auszudrücken. Wenn du „Dinge ändern“ musst, willst du das normalerweise in einem Event-Handler tun. Als letztes Mittel kannst duuseEffectverwenden.
• Das Schreiben reiner Funktionen erfordert etwas Übung, aber es erschließt die Kraft des React-Paradigmas.