Klasse gegen funktionale Komponenten in React und die supergeheime dritte Option

Ich bevorzuge Kautabletten.

Als ich mit meinem Streifzug durch React beginne, höre ich am häufigsten die Frage: "Warum würde ich nicht einfach eine Klassenkomponente für alles verwenden?" Warum sich überhaupt mit Funktionskomponenten beschäftigen? “

Ungeachtet dessen, was manche eingefleischten Programmierer sagen, ist dies nicht unbedingt eine schlechte Frage. Schließlich bieten Klassenkomponenten uns so viel mehr Flexibilität und Potenzial als eine einfache, „dumme“ Komponente. Sicher gibt es ein paar gute Gründe, warum wir uns überhaupt mit funktionalen (oder „zustandslosen“) Komponenten beschäftigen.

Nun, nach einigem Graben lautet die Antwort…

Subjektiv.

Lassen Sie uns also schnell die beiden Typen durchgehen und herausfinden, warum Sie einen über den anderen verwenden möchten.

Funktionskomponenten

Vielleicht besser bekannt in der React-Community als "Stateless" -Komponenten, sind dies genau die Aussagen, die auf der Dose stehen: Stateless-Funktionen. Da es nicht möglich ist, über eigene Methoden zu verfügen oder auf diese zu verweisen, kann eine zustandslose Komponente nur ein Rendering erzielen, indem sie JSX (oder React.createElement () zurückgibt, wenn Sie der alten Schule angehören).

Sie haben keinen Zugriff darauf, können also weder einen eigenen Status haben, noch können sie aus demselben Grund über Lebenszyklusmethoden verfügen. Für diejenigen, die Sie brauchen ...

Klassenkomponenten

Das Brot und die Butter von Reacts Framework, Klassenkomponenten, können alles: Zustand, Lebenszyklusmethoden, reguläre Methoden und Rendering, alles in einem ordentlichen Klassenkörper verpackt.

Ordentlich! Nun, welche soll ich verwenden?

Die Illusion der Wahl

Was für ein beunruhigender Untertitel! Nachdem Sie die einzelnen Komponenten gelesen haben, denken Sie wahrscheinlich: "Verwenden Sie offensichtlich eine zustandslose Komponente, wenn Sie nur etwas basierend auf Requisiten rendern müssen!" Und Sie haben Recht! In der Regel ist dies genau der Grund, warum Sie eine zustandslose Komponente verwenden, aber was ist mit der Leistung? Erinnerung?

Diese hängen hauptsächlich von der Größe der Klassenkomponente ab. Denken Sie daran, dass diese beiden Typen transpiliert werden müssen, was sich wiederum auf das Gedächtnis auswirkt. Offensichtlich wird eine detailliertere Datei mehr Speicher belegen und die Leistung beeinträchtigen als eine einfache zustandslose Komponente, die aufgrund ihrer Größe nur so groß sein kann, dass Sie wahrscheinlich eine Neubewertung vornehmen sollten, wenn es sich nur um eine oder mehrere Komponenten handelt.

Was ist also mit diesem beängstigenden Untertitel? Fragen wir den React-Experten Dan Abramov.

Nehmen Sie dies mit ein wenig Salz, da es zu diesem Zeitpunkt schon etwas älter ist und Aktualisierungen in dieser Angelegenheit schwer zu finden sind. Andere Entwickler im React-Team haben bereits einige Verbesserungen an der Geschwindigkeit der Funktionskomponenten vorgenommen. Seit geraumer Zeit wird auch darüber geredet, zustandslose Komponenten so zu optimieren, dass sie sich später als nützlicher erweisen.

Nach einigen eigenen Benchmark-Tests scheinen funktionale Komponenten das Potenzial zu haben, im Durchschnitt um etwa 20% schneller zu laufen, was nichts auszusetzen ist.

Und doch ... gibt es einen anderen Weg ...

Spoiler Alert: der echte ist JavaScript

Ich verdanke diese aufrichtige, umwerfende Beobachtung Philippe Lehouxs "Medium Article 45% Faster React Functional Components". Der Grund, warum funktionale Komponenten nicht sofort viel schneller sind als Klassenkomponenten, liegt darin, dass sie React.Component noch erweitern und somit immer noch die gesamte Logik einer Klassenkomponente laden!

Um diese dummen Komponenten zu beschleunigen, müssen wir das unnötige Gepäck umgehen, das uns React.Component übergibt, und wenn wir auf React verzichten müssen, ist die Antwort gut, alter JS.

Boom.

Ich kenne. Es ist so einfach und doch so schön. Außerdem hat es in meinen Benchmark-Tests eine normale Klassenkomponente um 51% übertroffen. 51!

Schauen wir uns die Transpilation an und sehen, warum das so ist.

Direkter Funktionsaufruf vs. Komponenteninstanziierung

In unserer normalen Komponenteninstanziierung haben wir Aufrufe von .createElement () verschachtelt, um unseren DOM-Baum aufzubauen, aber mit direkten Funktionsaufrufen können wir einfach den Rückgabewert unserer Funktion löschen.

Also, was ist die Wahrheit?

(Entschuldigung, nicht Entschuldigung)

Was gibt es am Ende des Tages zum Mitnehmen?

  1. Klassen sind mächtiger und flexibler,
  2. Staatenlose sind etwas schneller (und erfordern weniger Eingaben!), Mit einigen Versprechungen im Hinblick auf die Optimierung.
  3. Es steht Ihnen ein (etwas ungetesteter) Speed-Hack zur Verfügung, wenn Sie die Leistung herausfordern möchten, die Sie erhalten können.
  4. Tun Sie am Ende des Tages, was für die Komponente das Nötigste ist. Es ist wahrscheinlich die richtige Wahl.