React Tutorial Teil 13: Klassenbasierte Komponenten

Heute veröffentlichen wir eine Übersetzung des nächsten React-Tutorials. Es konzentriert sich auf klassenbasierte Komponenten. Solche Komponenten werden mit dem Schlüsselwort class erstellt.



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt

Lektion 24. Klassenbasierte Komponenten

→ Original

Wenn Sie, bevor Sie mit der Beherrschung dieses Schulungskurses begonnen haben, React auf der Grundlage einiger anderer Kurse studiert haben, haben Sie möglicherweise eine Frage zu der Tatsache, dass wir hier funktionale Komponenten verwenden. Tatsache ist, dass in vielen anderen Kursen dieses Thema entweder nicht behandelt wird oder funktionale Komponenten als etwas bezeichnet werden, das nicht besonders notwendig ist. Einige Autoren gehen sogar noch weiter und sagen, dass es besser ist, keine funktionalen Komponenten zu verwenden, als klassenbasierte Komponenten zu bevorzugen. Dies erspart dem Programmierer ihrer Meinung nach unnötiges Laden. Ich glaube, dass jeder, der React studiert, es nützlich finden wird, das Gesamtbild zu sehen und mehr über Komponentenansätze zu erfahren, die heutzutage beliebt sind. Insbesondere ist jetzt die Richtung relevant, nach der Funktionskomponenten wo immer möglich verwendet werden, und klassenbasierte Komponenten nur dort, wo sie wirklich benötigt werden. Es sei darauf hingewiesen, dass dies alles nur eine Empfehlung ist. Jeder Entwickler entscheidet genau, wie er seine Anwendungen gestaltet.

Wenn ich React-Kurse unterrichte, beginne ich lieber mit funktionalen Komponenten, da Funktionen klare Konstrukte sind. Ein einziger Blick auf eine Funktionskomponente reicht aus, um genau zu verstehen, welche Aktionen sie ausführt. Angenommen, hier ist der Code einer Funktionskomponente, bei der es sich um eine reguläre Funktion handelt, die ein <div> -Element zurückgibt, das ein <h1> -Element mit Text enthält.

 function App() {   return (       <div>           <h1>Code goes here</h1>       </div>   ) } 

Wenn wir uns jedoch eingehender mit dem Studium von React befassen und uns mit dessen Fähigkeiten vertraut machen, stellt sich heraus, dass funktionale Komponenten uns nicht alles bieten können, was wir von React-Komponenten benötigen. Daher werden wir heute über klassenbasierte Komponenten sprechen. Beginnen wir mit dem Erstellen einer Komponente, die auf einer Klasse basiert, die dieselben Aktionen wie die obige Funktionskomponente ausführt. In der nächsten Lektion werden wir auf die zusätzlichen Funktionen eingehen, die uns klassenbasierte Komponenten bieten. Insbesondere sprechen wir über die Möglichkeit, mit dem Zustand von Bauteilen und mit den Methoden ihres Lebenszyklus zu arbeiten.

Konvertieren Sie eine Funktionskomponente in eine Komponente, die auf einer Klasse basiert. Wenn Sie mit dem in ES6 enthaltenen Schlüsselwort class und den Möglichkeiten, die es Entwicklern bietet, nicht besonders vertraut sind, sollten Sie sich etwas Zeit nehmen, um die Klassen besser kennenzulernen.

Klassenbasierte Komponentenbeschreibungen beginnen mit dem Schlüsselwort class . Dann kommt der Name der Komponente, der nach denselben Regeln wie die Namen der Funktionskomponenten kompiliert wurde. Gleichzeitig wird es nach einer Konstruktion wie der class App keine Klammer sein, sondern eine Konstruktion des Formulars extends React.Component . Danach setzen Sie ein Paar geschweifte Klammern, in denen der Körper der Klasse beschrieben wird.

Klassen in JavaScript sind ein Add-On zum traditionellen Vererbungsmodell für Prototypen. Der Kern der Konstruktion der class App extends React.Component besteht darin, dass wir eine neue Klasse deklarieren und darauf hinweisen, dass ihr Prototyp React.Component sein sollte. Das Vorhandensein dieses Prototyps in unserer Komponente ermöglicht es uns, alle nützlichen Funktionen zu verwenden, die in React.Component in dieser Komponente verfügbar sind.

In dieser Phase der Arbeit an einer auf Klassen basierenden Komponente sieht der Code folgendermaßen aus:

 class App extends React.Component {  } 

Eine klassenbasierte Komponente muss mindestens eine Methode haben. Dies ist die render() -Methode. Diese Methode sollte dieselbe zurückgeben, die wir normalerweise von Funktionskomponenten zurückgeben. So sieht der vollständige Code einer klassenbasierten Komponente aus, die dieselben Funktionen wie die oben genannte Funktionskomponente implementiert.

 class App extends React.Component {   render() {       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

Arbeiten Sie mit klassenbasierten Komponenten genauso wie mit funktionalen Komponenten. In unserem Fall reicht es also aus, den Code der Funktionskomponente durch den neuen Code zu ersetzen, und die Anwendung funktioniert wie zuvor.

Lassen Sie uns über die render() -Methode sprechen. Wenn Sie vor dem Bilden der von dieser Methode zurückgegebenen Elemente einige Berechnungen durchführen müssen, werden diese in dieser Methode vor dem Befehl return ausgeführt. Wenn Sie also Code haben, der die Reihenfolge bestimmt, in der die visuelle Darstellung der Komponente erstellt wird, muss dieser Code in die render eingefügt werden. Hier können Sie beispielsweise Stile anpassen, wenn Sie integrierte Stile verwenden. Es wird auch Code geben, der den bedingten Rendering-Mechanismus und andere ähnliche Konstruktionen implementiert.
Wenn Sie mit Klassen vertraut sind, können Sie Ihre eigene Methode erstellen und den Code, der die Komponente für die Visualisierung vorbereitet, darin platzieren. Anschließend können Sie diese Methode in der render aufrufen. Es sieht so aus:

 class App extends React.Component {     yourMethodHere() {         }     render() {       const style = this.yourMethodHere()       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

Hier gehen wir nämlich von der Annahme aus, dass in der Methode yourMethodHere() Stile generiert werden und das, was zurückgegeben wird, in die in der render() -Methode deklarierte yourMethodHere() geschrieben wird. Bitte beachten Sie, dass das Schlüsselwort verwendet wird, um auf unsere eigene Methode zuzugreifen. Später werden wir über die Funktionen dieses Schlüsselworts sprechen, aber jetzt konzentrieren wir uns auf das hier vorgestellte Design.

Lassen Sie uns nun darüber sprechen, wie Sie mit den Eigenschaften arbeiten, die an Klassen übergeben werden, wenn Instanzen davon in klassenbasierten Komponenten erstellt werden.

Bei Verwendung von Funktionskomponenten haben wir eine entsprechende Funktion mit dem Parameter props deklariert. props handelt es sich um ein Objekt, das empfangen hat, was bei der Instanziierung an die Komponente übergeben wurde. Es sieht so aus:

 function App(props) {   return (       <div>           <h1>{props.whatever}</h1>       </div>   ) } 

Wenn Sie mit einer Komponente arbeiten, die auf einer Klasse basiert, sieht dasselbe so aus:

 class App extends React.Component {   render() {       return (           <div>               <h1>{this.props.whatever}</h1>           </div>       )   } } 

Zusammenfassung

Wie bereits erwähnt, bieten klassenbasierte Komponenten dem Entwickler viele Optionen. Wir werden mehr über diese Funktionen sprechen. Und jetzt können Sie mit dem experimentieren, was Sie heute gelernt haben, und sich auf eine praktische Lektion zu Komponenten vorbereiten, die auf Klassen basieren.

Liebe Leser! Wenn Sie React professionell einsetzen, teilen Sie uns bitte mit, in welchen Situationen Sie Funktionskomponenten und in welchen klassenbasierten Komponenten verwenden.