Heim > Web-Frontend > js-Tutorial > Was sind die Funktionen des Reaktionslebenszyklus?

Was sind die Funktionen des Reaktionslebenszyklus?

hzc
Freigeben: 2020-06-22 15:31:03
Original
2808 Leute haben es durchsucht

Was sind die Funktionen des Reaktionslebenszyklus?

Lebenszyklusfunktion reagieren

Initialisierung

1.getDefaultProps()

Hinweis: getDefaultProps ist Diese Definitionsmethode wird verwendet, wenn Sie Komponenten mithilfe der React.createClass-Methode definieren.
Wenn Sie die ES6-Syntax verwenden, wenn Sie beispielsweise den Klassenkomponentennamen „extends React.Component“ verwenden, verwenden Sie nicht die Methode „
getDefaultProps“. Definieren Sie Requisiten, sollten aber mit static propTypes ={} definiert werden, damit kein Alarm auftritt

设置默认的props,也可以用dufaultProps设置组件的默认属性. ---》设置
Nach dem Login kopieren
2.getInitialState()

Hinweis: Der Unterschied zu getDefaultProps besteht darin, dass Ersteres den Standardwert festlegt props, und letzteres legt den Anfangszustand fest. Bei Verwendung der es6-Klassensyntax gibt es keine solche Hook-Funktion. Sie können this.state direkt im Konstruktor definieren. Sie können zu diesem Zeitpunkt auf this.props

3.componentWillMount

zugreifen. Hinweis: Es wird nur aufgerufen, wenn die Komponente aktualisiert wird Wird im gesamten Lebenszyklus nur einmal aufgerufen. Zu diesem Zeitpunkt kann der Status geändert werden.

4. render()

Hinweis: Die wichtigsten Schritte zum Reagieren, Erstellen eines virtuellen Doms, Durchführen des Diff-Algorithmus und Aktualisieren des Dom-Baums werden alle hier ausgeführt. Zu diesem Zeitpunkt kann der Status nicht geändert werden.

5.componentDidMount()

Hinweis: Wird nach dem Rendern der Komponente aufgerufen und nur einmal aufgerufen. Hier können Sie Daten anfordern

· Update

1.componentWillReceiveProps(nextProps)

Hinweis: Es wird nicht aufgerufen, wenn die Komponente initialisiert wird, sondern wird aufgerufen, wenn die Komponente akzeptiert neue Requisiten.

2.shouldComponentUpdate(nextProps, nextState)

Hinweis: Die Optimierung der Reaktionsleistung ist ein sehr wichtiger Teil. Wird aufgerufen, wenn die Komponente einen neuen Status oder neue Requisiten akzeptiert. Wir können festlegen, ob die beiden Requisiten und der Status vor und nach dem Vergleich gleich sind. Wenn sie gleich sind, geben Sie false zurück, um die Aktualisierung zu verhindern, da derselbe Attributstatus definitiv dasselbe generiert DOM-Baum, daher ist es nicht erforderlich, einen neuen DOM-Baum zu erstellen und den alten DOM-Baum mit dem Diff-Algorithmus zu vergleichen, um viel Leistung zu sparen, insbesondere wenn die DOM-Struktur komplex ist

3.componentWillUpdata(nextProps, nextState )

Hinweis: Komponente Wird nicht während der Initialisierung aufgerufen. Sie wird nur aufgerufen, wenn die Komponente aktualisiert werden soll. Zu diesem Zeitpunkt können Sie den Status ändern

4.render()

Hinweis: Komponentenrendering

5.componentDidUpdate( )

Hinweis: Es wird nicht aufgerufen, wenn die Komponente initialisiert wird. Es wird aufgerufen, nachdem die Komponentenaktualisierung abgeschlossen ist Zu diesem Zeitpunkt kann der Dom-Knoten abgerufen werden.

·Uninstall

componentWillUnmount()
Hinweis: Wird aufgerufen, wenn die Komponente unmontiert werden soll. Zu diesem Zeitpunkt müssen einige Ereignis-Listener und Timer gelöscht werden.

Empfohlenes Tutorial: „Reagieren-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die Funktionen des Reaktionslebenszyklus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage