Quelles sont les fonctions de cycle de vie de React ?

Les fonctions de cycle de vie de React sont : 1. la fonction ComponentWillMount ; 2. la fonction ComponentDidMount ; 3. la fonction ShouldComponentUpdate ; 4. la fonction ComponentWillUpdate ; 6. la fonction ComponentWillUnmount ;

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Quelles sont les fonctions de cycle de vie de React ?

La fonction cycle de vie de React (super détaillée)

Sans plus attendre, allons droit au but !

Tout d'abord, jetons un coup d'œil aux fonctions de cycle de vie de React :

• La fonction qui se déclenche lorsque le composant est sur le point d'être monté : componentWillMount

• La fonction qui se déclenche lorsque le composant est monté est terminé : composantDidMount

• La fonction qui est déclenchée lorsque les données sont sur le point d'être mises à jour : ShouldComponentUpdate

• La fonction qui est déclenchée lorsque les données sont sur le point d'être mises à jour : composantWillUpdate

• La fonction qui est déclenchée lorsque la mise à jour des données est terminée : composantDidUpdate

• Le composant sera détruit La fonction qui est déclenchée lorsque : composantWillUnmount

• La fonction qui est déclenchée lorsque la valeur des accessoires est modifiée dans le composant parent : composantWillReceiveProps

Expliquons le code en détail

1. Pièce de montage
Selon le responsable D'après le diagramme du cycle de vie, nous pouvons voir que le chargement et le rendu d'un composant commencent par defaultProps et propsTypes (ce que sont ces deux-là sera discuté séparément dans le prochain article, et ce n'est pas l'objet ici)
Ensuite, il y a constructor et le contenu initial dans this.state Data , voici donc la première étape. Ensuite, le composant componentWillMount commencera à être monté. C'est la deuxième étape. Ensuite, le composant est monté, le rendu est analysé et rendu, donc la troisième étape est sur le point de se produire, c'est-à-dire que les données de rendu sont toutes rendues, et enfin componentDidMount
le montage du composant est terminé.

Code du sous-composant, introduisez simplement le rendu dans le composant parent (je n'entrerai pas dans le code ici)

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

Ouvrez la console pour voir

2. Partie mise à jour des données
Si les données sont mises à jour , la première étape est de confirmer avec shouldComponentUpdate s'il faut mettre à jour les données , elles seront mises à jour lorsque cette fonction retournera true, et cette fonction peut déclarer deux paramètres nextProps et nextState,
nextProps est la valeur passé du composant parent au composant enfant, nextState est la valeur après la mise à jour des données, ces deux valeurs peuvent être obtenues dans cette fonction. Dans la deuxième étape, après avoir confirmé les données de mise à jour, componentWillUpdate mettra à jour les données La troisième étape est toujours rendu Si les données changent, le rendu sera restitué. La quatrième étape consiste à terminer la mise à jour des donnéescomponentDidUpdate.

En termes de code, sur la base de la partie précédente, le sous-composant définit une donnée initiale dans this.state, lie ces données dans le rendu, puis ajoute un bouton pour déclarer un événement onClick pour modifier ces données. De cette façon, vous pouvez voir l'effet de la partie mise à jour des données. J'ai supprimé la première partie du code ici pour le rendre moins compliqué.

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. Parlons séparément de componentWillReceiveProps. La fonction qui est déclenchée lorsque la valeur des accessoires est modifiée dans le composant parent
Cette fonction est déclenchée lorsque la valeur des accessoires est modifiée lorsque notre composant parent transmet la valeur au composant parent. composant enfant., je viens de mentionner dans la deuxième partie que la fonction ShouldComponentUpdate peut porter deux paramètres, nextProps est la valeur passée du composant parent au composant enfant
Définir une donnée de titre initiale dans le composant parent, écrire un bouton pour déclarer un événement onClick Changez ce titre

IV. La fonction lorsque le composant componentWillUnmount est sur le point d'être détruit
Définissez une valeur d'état avec le flag comme true dans le composant parent, ajoutez un bouton pour déclarer un événement onClick
Changez ce flag en détruire le composant.

Code du composant parent :

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;

Code complet du composant enfant :

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视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!