React.js: Klassenkomponenten

Hallo, mein Name ist Tony und ich bin dabei. In diesen Lektionen erfahren Sie mehr über den Unterricht. Komponenten, Zustands- und Requisitenkomponenten und ihre Verwendung. In dieser Lektion zeige ich Ihnen, wie Sie Klassenkomponenten verwenden und Lebenszyklusfunktionen. Komponenten sind ein unabhängiger Code, der verwendet werden kann auf die gleiche Weise wie eine JavaScript-Funktion. Es funktioniert isoliert, aber die einzige Einschränkung besteht darin, dass es sich um eine Komponente handelt muss immer HTML zurückgeben, da dies die visuelle Darstellung ist mit dem unser Benutzer während der gesamten Zeit interagieren wird Nutzung unserer Anwendung. Jetzt vor React Version 16.8 klassenbasiert. Komponenten waren die einzige Möglichkeit, den Zustand beizubehalten und Funktion. Komponenten wurden sozusagen als kleinere Komponenten betrachtet etwas, das staatenlos war. Aber seit der Einführung von Haken wie z. Als UseState haben wir nun Zugriff. Um die gleiche Funktionalität wie eine herkömmliche Klasse zu bieten Komponente. Schauen wir uns nun an, was. Eine klassenbasierte Komponente ist. Das merken wir jetzt in erster Linie. Ein Objekt, das eine klassenbasierte Reaktionskomponente ist, wird immer erweitert eine Entität namens React-Komponente. Das ist etwas, was von der React-Gruppe umgesetzt wurde und als solches verfügt es über die folgenden Lebenszyklusmethoden. Stehen uns zur Verfügung, da sie vorab implementiert wurden. Der einzige von allen. Voraussetzung dafür ist natürlich die Render-Methode. Der Konstruktor ist die erste Lebenszyklusfunktion, die abgerufen wird angerufen. Sie sehen, dass es Requisiten bekommt, das ist etwas im Grunde genommen Argumente, die unsere Komponente möglicherweise erhält. Sagen wir einfach, dass es Argumente gibt, die wir vorbringen werden besondere Nutzung während des gesamten Lebenszyklus unserer Komponente. Sie können sehen, dass der Staat ist. Wird in einer speziellen Variablen namens „This State“ gehalten. Den Zustand hier zu sehen ist ziemlich einfach. Wir stellen den Hintergrund auf Weiß ein. Oder hexadezimales FFF Das ist eine Abkürzung für FFF oder einfach nur weiß. Sehen Sie, wie die zweite Lebenszyklusfunktion aufgerufen wird. Abgeleiteter Zustand aus Requisiten abrufen. Das ist eine gute Funktion. Aktualisieren Sie den Status, wenn der Status aktualisiert wird. Wird basierend auf den Requisiten, die unsere Komponente erhält, gewährleistet. Nehmen wir also an, dass dies unser ursprünglicher Hintergrund ist. Ist weiß, aber wenn etwas anderes Ist. Wird an eine Komponente übergeben, die davon abweicht. Was wir angegeben haben wir werden. Verwenden Sie nun diese Requisite als unsere Farbe. Die dritte Methode in unseren Lebenszyklusfunktionen ist die einzige eine, die erforderlich ist und Render heißt. Wie Sie sehen können, ist diese Methode. Besonders, da es HTML zurückgibt, genauer gesagt JSX. Und dies wird als visuelle Darstellung dafür dienen die Komponente, mit der mein Benutzer interagieren wird. Während des gesamten Lebenszyklus unserer Anwendung. Dies ist einer Funktionskomponente sehr ähnlich, aber wir können es siehe in einer klassenbasierten Darstellung render ist Eigentlich ist es eine eigene Methode, und wie ich bereits sagte, ist sie es auch erforderlich. Wenn Sie diese Methode also nicht haben, gehen Sie im Grunde um eine Beschwerde von Ihrem Compiler und Ihrer Komponente zu erhalten wird nicht kompiliert. Abschließend wird die vierte Funktion in der Lebenszyklusmethode aufgerufen Komponente Didmount, und sie wird ausgelöst, nachdem unsere Komponente vorhanden ist vollständig im Dom. Und das ist ein guter Ort dafür Nehmen Sie vorher eine Art letzte Aktion an unserer Komponente vor Es wird schließlich dem Benutzer präsentiert, und dann liegt es an ihm Benutzer zur Interaktion. Von da an mit. In unserer nächsten Lektion werden wir uns das genauer ansehen Was. Requisiten sind und wie sie verwendet werden. Mit klassenbasierten Komponenten. Vielen Dank fürs Zuschauen. Tschüss.