Was sind die Lebenszyklusfunktionen von React?

Die Lebenszyklusfunktionen von „react“ sind: 1. „componentWillMount“-Funktion; 3. „componentWillUpdate“-Funktion; 6. „componentWillReceiveProps“-Funktion;

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

Was sind die Lebenszyklusfunktionen von React?

Reacts Lebenszyklusfunktion (sehr detailliert)

Kommen wir ohne weitere Umschweife direkt zur Sache!

Werfen wir zunächst einen Blick auf die Lebenszyklusfunktionen von React:

• Die Funktion, die ausgelöst wird, wenn die Komponente montiert werden soll: ComponentWillMount

• Die Funktion, die ausgelöst wird, wenn die Komponente Die Bereitstellung ist abgeschlossen: ComponentDidMount

• Die Funktion, die ausgelöst wird, wenn die Daten aktualisiert werden: ShouldComponentUpdate

• Die Funktion, die ausgelöst wird, wenn die Daten aktualisiert werden sollen: ComponentWillUpdate

• Die Funktion, die ausgelöst wird, wenn die Datenaktualisierung abgeschlossen ist: ComponentDidUpdate in der übergeordneten Komponente geändert: ComponentWillReceiveProps

• Lassen Sie uns den Code im Detail erklären

  1. Montageteil
• Nach Angaben des Beamten Aus dem Lebenszyklusdiagramm können wir erkennen, dass das Laden und Rendern einer Komponente mit beginnt defaultProps und propsTypes (was diese beiden sind, wird im nächsten Artikel separat besprochen und steht hier nicht im Mittelpunkt)

  Dann gibt es constructor und die Initialen in this.state Data , also hier ist der erste Schritt. Anschließend wird mit der Montage der

  componentWillMount-Komponente begonnen. Dies ist der zweite Schritt. Dann wird die Komponente gemountet, das Rendern wird analysiert und gerendert, sodass der dritte Schritt bald erfolgt, d.

Unterkomponentencode, führen Sie einfach das Rendern in die übergeordnete Komponente ein (ich werde hier nicht auf den Code eingehen)

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		console.log('01构造函数')		
		super(props)
		this.state={
			
		}
	}
	//组件将要挂载时候触发的生命周期函数
	componentWillMount(){
		console.log('02组件将要挂载')
	}
	//组件挂载完成时候触发的生命周期函数
	componentDidMount(){
		console.log('04组件将要挂载')
	}
	render(){
		console.log('03数据渲染render')
		return(
			<div>
				生命周期函数演示
			</div>
		) 
	}
}
export default Smzq

Öffnen Sie die Konsole zum Anzeigen

2. Datenaktualisierungsteil Wenn die Daten aktualisiert werden , der erste Schritt besteht darin, mit shouldComponentUpdate zu bestätigen, ob die Daten aktualisiert werden sollen , sie werden aktualisiert, wenn diese Funktion true zurückgibt, und diese Funktion kann zwei Parameter
nextProps und

nextState

deklarieren,

nextProps ist der Wert Von der übergeordneten Komponente an die untergeordnete Komponente übergeben, ist nextState der Wert nach der Datenaktualisierung. Diese beiden Werte können in dieser Funktion abgerufen werden.
Im zweiten Schritt aktualisiert componentWillUpdate die Daten

. Der dritte Schritt ist immer noch

render. Wenn sich die Daten ändern, wird das Rendern erneut durchgeführt. Der vierte Schritt besteht darin, die componentDidUpdate-Datenaktualisierung
abzuschließen. In Bezug auf den Code definiert die Unterkomponente basierend auf dem vorherigen Teil anfängliche Daten in this.state, bindet diese Daten in Render und fügt dann eine Schaltfläche hinzu, um ein onClick-Ereignis zu deklarieren, um diese Daten zu ändern. Auf diese Weise können Sie die Auswirkung des Datenaktualisierungsteils sehen. Ich habe den ersten Teil des Codes hier gelöscht, damit er weniger chaotisch aussieht.

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		super(props)
		this.state={
			msg:'我是一个msg数据'
		}
	}
	//是否要更新数据，如果返回true才会更新数据
	shouldComponentUpdate(nextProps,nextState){
		console.log('01是否要更新数据')
		console.log(nextProps)		//父组件传给子组件的值，这里没有会显示空
		console.log(nextState)		//数据更新后的值
		return true;				//返回true，确认更新
	}
	//将要更新数据的时候触发的
	componentWillUpdate(){
		console.log('02组件将要更新')
	}
	//更新数据时候触发的生命周期函数
	componentDidUpdate(){
		console.log('04组件更新完成')
	}
	//更新数据
	setMsg(){
		this.setState({
			msg:'我是改变后的msg数据'
		})
	}
	render(){
		console.log('03数据渲染render')
		return(
			<div>
				{this.state.msg}
				<br>
				<hr>
				<button>this.setMsg()}>更新msg的数据</button>
			</div>
		) 
	}
}
export default Smzq

3. Lassen Sie uns separat über die Funktion „componentWillReceiveProps“ sprechen, die ausgelöst wird, wenn der Wert von „props“ in der übergeordneten Komponente geändert wird Untergeordnete Komponente. Funktion, ich habe gerade im zweiten Teil erwähnt, dass die Funktion ShouldComponentUpdate zwei Parameter tragen kann. nextProps ist der Wert, der von der übergeordneten Komponente an die untergeordnete Komponente übergeben wird. Definieren Sie anfängliche Titeldaten in der übergeordneten Komponente und schreiben Sie eine zu deklarierende Schaltfläche ein onClick-Ereignis. Ändern Sie diesen Titel.
IV. Die Funktion, wenn die Komponente „componentWillUnmount“ kurz vor der Zerstörung steht. Definieren Sie einen Statuswert mit dem Flag „true“ in der übergeordneten Komponente. Fügen Sie eine Schaltfläche hinzu, um ein onClick-Ereignis zu deklarieren. Ändern Sie dieses Flag in das Bauteil zerstören. Code der übergeordneten Komponente:

import React, { Component } from 'react';
import Smzq from './components/Smzq'

class App extends Component {
	constructor(props){
		super(props)
		this.state={
			flag:true,
			title:"我是app组件的标题"
		}
	}
	//创建/销毁组件
	setFlag(){
		this.setState({
			flag:!this.state.flag
		})
	}
	//改变title
	setTitle(){
		this.setState({
			title:'我是app组件改变后的title'
		})
	}
  	render() {
	    return (
	      <div>
				{
					this.state.flag?<smzq></smzq>:''
				}
				<button>this.setFlag()}>挂载/销毁生命周期函数组件</button>
				<button>this.setTitle()}>改变app组件的title</button>
	      </div>
	    );
 	}
}
export default App;

Vollständiger Code der untergeordneten Komponente:

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		super(props)
		this.state={
			msg:'我是一个msg数据'
		}
	}
	//组件将要挂载时候触发的生命周期函数
	componentWillMount(){
		console.log('02组件将要挂载')
	}
	//组件挂载完成时候触发的生命周期函数
	componentDidMount(){
		//Dom操作，请求数据放在这个里面
		console.log('04组件挂载完成')
	}
	//是否要更新数据，如果返回true才会更新数据
	shouldComponentUpdate(nextProps,nextState){
		console.log('01是否要更新数据')
		console.log(nextProps)		//父组件传给子组件的值，这里没有会显示空
		console.log(nextState)		//数据更新后的值
		return true;				//返回true，确认更新
	}
	//将要更新数据的时候触发的
	componentWillUpdate(){
		console.log('02组件将要更新')
	}
	//更新数据时候触发的生命周期函数
	componentDidUpdate(){
		console.log('04组件更新完成')
	}
	//你在父组件里面改变props传值的时候触发的函数
	componentWillReceiveProps(){
		console.log('父子组件传值，父组件里面改变了props的值触发的方法')
	}
	setMsg(){
		this.setState({
			msg:'我是改变后的msg数据'
		})
	}
	//组件将要销毁的时候触发的生命周期函数，用在组件销毁的时候执行操作
	componentWillUnmount(){
		console.log('组件销毁了')
	}
	render(){
		console.log('03数据渲染render')
		return(
			<div>
				生命周期函数演示--{this.state.msg}--{this.props.title}
				<br>
				<hr>
				<button>this.setMsg()}>更新msg的数据</button>
			</div>
		) 
	}
}
export default Smzq

点击挂载/销毁生命周期函数组件这个按钮的时候
子组件消失，控制台打印：组件销毁了。

当父组件给子组件传值时

这里nextProps这个就有上图划红线的值了。
那么我们再点击改变app组件的title这个按钮

这里可以看到componentWillReceiveProps这个函数被触发了，nextProps这个值也发生了改变。

到这里就全部结束了，可能写的不够清晰，不知道有没有人能看完，over。

推荐学习：《react视频教程》

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