Wie ist der Lebenszyklus von React Native-Komponenten?

Dieses Mal erkläre ich Ihnen, wie lang der Lebenszyklus von React Native-Komponenten ist und welche Vorsichtsmaßnahmen für den Lebenszyklus von React Native-Komponenten gelten. Hier sind praktische Fälle. Werfen wir einen Blick darauf.

Hier ist eine Einführung in den Lebenszyklus von React Native-Komponenten. Ich glaube, dass dies für jeden eine große Hilfe sein wird, wenn Sie interessiert sind.

Genau wie View in der Android-Entwicklung haben auch Komponenten in React Native (RN) einen Lebenszyklus. Der sogenannte Lebenszyklus ist der Zustand, den ein Objekt von seiner ursprünglichen Entstehung bis zu seinem endgültigen Untergang durchläuft. Das Verständnis des Lebenszyklus ist der Schlüssel zur rationalen Entwicklung. Der Lebenszyklus von RN-Komponenten ist wie folgt organisiert

Wie in der Abbildung dargestellt, lässt sich der Komponentenlebenszyklus grob in drei Phasen unterteilen:

• Die erste Phase: ist die erste Zeichenphase der Komponente, wie im oberen gepunkteten Feld in der Abbildung gezeigt, in der das Laden und die Initialisierung der Komponente abgeschlossen sind.

• Die zweite Phase : ist, wenn sich die Komponente in der Ausführungs- und Interaktionsphase befindet, wie im gepunkteten Feld in der unteren linken Ecke der Abbildung gezeigt, können diese Phasenkomponenten Benutzerinteraktionen verarbeiten oder Ereignisse zum Aktualisieren der Schnittstelle empfangen

• Die dritte Stufe: Ja In der Phase der Deinstallation und des Todes der Komponente, wie im gepunkteten Kästchen in der unteren rechten Ecke der Abbildung dargestellt, werden hier einige Komponentenreinigungsarbeiten durchgeführt.

LebenszyklusRückruffunktion

Als nächstes werden wir jede Rückruffunktion im Lebenszyklus detailliert vorstellen.

getDefaultProps

Bevor die Komponente erstellt wird, wird zuerst getDefaultProps() aufgerufen. Dies ist streng genommen kein Teil des Lebenszyklus der Komponente. Wenn eine Komponente erstellt und geladen wird, wird zuerst getInitialState() aufgerufen, um den Zustand der Komponente zu initialisieren.

ComponentWillMount

Um dann das Laden der Komponente vorzubereiten, wird „componentWillMount()“ aufgerufen, und sein Prototyp lautet wie folgt:

void componentWillMount()

Diese Funktion wird aufgerufen, nachdem die Komponente erstellt und der Status initialisiert wurde, aber bevor render() zum ersten Mal gezeichnet wird. Hier können Sie einige Geschäftsinitialisierungsvorgänge durchführen und auch den Komponentenstatus festlegen. Diese Funktion wird während des gesamten Lebenszyklus nur einmal aufgerufen.

ComponentDidMount

Nachdem die Komponente zum ersten Mal gezeichnet wurde, wird ComponentDidMount() aufgerufen, um zu benachrichtigen, dass die Komponente geladen wurde. Der Funktionsprototyp lautet wie folgt:

void componentDidMount()

Wenn diese Funktion aufgerufen wird, wurde ihr virtuelles DOM erstellt und Sie können damit beginnen, ihre Elemente oder Unterkomponenten in dieser Funktion abzurufen. Es ist zu beachten, dass das RN-Framework zuerst die Komponente ComponentDidMount () der untergeordneten Komponente und dann die Funktion der übergeordneten Komponente aufruft. Ausgehend von dieser Funktion können Sie mit anderen JS-Frameworks interagieren, z. B. das Timing setTimeout oder setInterval festlegen oder Netzwerkanforderungen initiieren. Auch diese Funktion wird nur einmal aufgerufen. Nach dieser Funktion wechselt es in einen stabilen Betriebszustand und wartet auf die Auslösung des Ereignisses.

ComponentWillReceiveProps

Wenn die Komponente neue Eigenschaften (Requisiten) erhält, wird ComponentWillReceiveProps() aufgerufen und ihr Prototyp lautet wie folgt:

void componentWillReceiveProps( 
 object nextProps
)

Der Eingabeparameter nextProps ist die Eigenschaft, die festgelegt wird, und die alten Eigenschaften können weiterhin über this.props abgerufen werden. In dieser Rückruffunktion können Sie Ihren Komponentenstatus aktualisieren, indem Sie this.setState() entsprechend der Änderung des Attributs aufrufen. Der Aufruf des Aktualisierungsstatus ist hier sicher und löst keinen zusätzlichen render()-Aufruf aus. Wie folgt:

componentWillReceiveProps: function(nextProps) { 
 this.setState({
  likesIncreasing: nextProps.likeCount > this.props.likeCount
 });
}

ShouldComponentUpdate

Wenn eine Komponente neue Attribute erhält und ihren Status ändert, löst sie einen Aufruf von ShouldComponentUpdate(...) aus. Der Funktionsprototyp lautet wie folgt:

boolean shouldComponentUpdate( 
 object nextProps, object nextState
)

Der Eingabeparameter nextProps ist derselbe wie die Funktion „componentWillReceiveProps“ oben. „nextState“ stellt den Statuswert dar, den die Komponente aktualisieren wird. Der Rückgabewert dieser -Funktion bestimmt, ob die Komponente aktualisiert werden muss. Wenn „true“, bedeutet dies, dass sie aktualisiert werden muss und mit dem nachfolgenden Aktualisierungsprozess fortgefahren werden muss. Andernfalls wird es nicht aktualisiert und wechselt direkt in den Wartezustand.

Standardmäßig gibt diese Funktion immer true zurück, um sicherzustellen, dass die Benutzeroberfläche synchron aktualisiert werden kann, wenn sich die Daten ändern. In großen Projekten können Sie diese Funktion selbst überladen und feststellen, ob die Benutzeroberfläche aktualisiert werden muss, indem Sie die Eigenschaften und den Status vor und nach der Änderung überprüfen, was die Anwendungsleistung effektiv verbessern kann.

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下：

void componentWillUpdate( 
 object nextProps, object nextState
)

输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

componentDidUpdate

调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：

void componentDidUpdate( 
 object prevProps, object prevState
)

因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState。

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下：

void componentWillUnmount()

在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

总结

到这里，RN 的组件的完整的生命都介绍完了，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格：

生命周期	调用次数	能否使用 setSate()
getDefaultProps	1(全局调用一次)	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Das obige ist der detaillierte Inhalt vonWie ist der Lebenszyklus von React Native-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!