Was sind die Unterschiede zwischen den drei Methoden zum Definieren von Komponenten in React?

Unterschiede: 1. Funktional definierte zustandslose Komponenten können nicht auf Lebenszyklusmethoden zugreifen, während es5- und es6-Methoden zustandsbehaftete Komponenten definieren und auf Lebenszyklusmethoden zugreifen können. 2. Die Funktion this in es5-Methoden kann automatisch gebunden werden, und die Funktion this in der Die ES6-Methode kann nicht automatisch gebunden werden und muss manuell gebunden werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was sind die Unterschiede zwischen den drei Methoden zur Definition von Reaktionskomponenten in React? Nach der Einführung von React gab es aus unterschiedlichen Gründen drei Möglichkeiten zur Definition von Reaktionskomponenten, die alle zum gleichen Ziel führten :

Stateless definiert durch Funktionsstilkomponenten
es5 Native Art und Weise, wie React.createClass definierte Komponenten
es6-Formular erweitert Komponenten definiert durch React.Component

1. Stateless-Funktionskomponenten

Es dient zum Erstellen reiner Anzeigekomponenten. Diese Art von Komponente ist nur für die Anzeige basierend auf den eingehenden Requisiten verantwortlich und beinhaltet keine Zustandsoperationen

Die Komponente wird nicht instanziiert, die Gesamtrenderleistung wird verbessert und sie kann nicht auf dieses Objekt zugreifen oder Lebenszyklusmethoden

2. Die native ES5-Methode React.createClass // RFC

React.createClass bindet Funktionsmethoden selbst, was zu unnötigem Leistungsaufwand führt und die Möglichkeit einer Codeveralterung erhöht.

3. E6-Vererbungsformular React.Component // RCC

Die derzeit dringend empfohlene Methode zum Erstellen zustandsbehafteter Komponenten wird letztendlich das React.createClass-Formular ersetzen. Im Vergleich zu React.createClass kann eine bessere Code-Wiederverwendung erreicht werden.

Der Unterschied zwischen zustandslosen Komponenten und den beiden letztgenannten Im Vergleich zu zustandslosen Komponenten erstellen React.createClass und React.Component beide zustandsbehaftete Komponenten, und diese Komponenten müssen instanziiert werden und haben Zugriff auf die Lebenszyklusmethoden der Komponente .

Der Unterschied zwischen React.createClass**** und React.Component

Die Funktion this ist selbstbindend

In der von React.createClass erstellten Komponente ist das this jeder Mitgliedsfunktion automatisch gebunden durch React. Dies wird in der Funktion korrekt eingestellt.

Bei Komponenten, die von React.Component erstellt wurden, binden ihre Mitgliedsfunktionen dies nicht automatisch, und Entwickler müssen sie manuell binden, da sonst das aktuelle Komponenteninstanzobjekt nicht abgerufen werden kann.

Der Komponenteneigenschaftstyp propTypes und seine Standardprops-Eigenschaft defaultProps sind unterschiedlich konfiguriert

React.createClass Beim Erstellen einer Komponente werden der Eigenschaftstyp der Komponentenprops und die Standardeigenschaften der Komponente als Eigenschaften der Komponenteninstanz konfiguriert , wobei defaultProps ist: Verwenden Sie die getDefaultProps-Methode, um die Standardkomponenteneigenschaften abzurufen. Wenn React.Component diese beiden entsprechenden Informationen beim Erstellen einer Komponente konfiguriert, werden sie als Eigenschaften der Komponentenklasse verwendet, nicht als Eigenschaften der Komponenteninstanz sogenannte statische Eigenschaften der Klasse konfiguriert.

Die Konfiguration des Anfangszustands der Komponente ist unterschiedlich.

Der Status der von React.createClass erstellten Komponente besteht darin, den komponentenbezogenen Status über die Methode getInitialState zu konfigurieren.
Der Status der von erstellten Komponente React.Component befindet sich im Konstruktor. Es wird wie die Initialisierung von Komponenteneigenschaften deklariert.

Abschließende Zusammenfassung

Versuchen Sie nach Möglichkeit die zustandslose Komponentenerstellung zu verwenden. Versuchen Sie bei Komponenten, die mit React.Component erstellt werden können, keine Komponenten in der Form von React.createClass zu erstellen, um die Wiederverwendbarkeit und die Leistung zu verbessern.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen den drei Methoden zum Definieren von Komponenten in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!