React のライフサイクル機能とは何ですか?

react のライフサイクル関数は、1.componentWillMount 関数、2.componentDidMount 関数、3. shouldComponentUpdate 関数、4.componentWillUpdate 関数、5.componentDidUpdate 関数、6.componentWillUnmount 関数、7.componentWillReceiveProps 関数です。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react のライフサイクル機能とは何ですか?

react のライフサイクル関数 (超詳細)

早速、本題に入りましょう！

最初に、react のライフサイクル関数を見てみましょう:

• コンポーネントがマウントされるときにトリガーされる関数:componentWillMount

• コンポーネントのマウント時にトリガーされる関数:componentDidMount

• コンポーネントのマウント時にトリガーされる関数:データが更新されるときにトリガーされる関数: shouldComponentUpdate

• ##データが更新されるときにトリガーされる関数:componentWillUpdate

• データ更新完了時にトリガーされる関数 関数:componentDidUpdate

• コンポーネントの更新完了時にトリガーされる関数破棄されようとしています:componentWillUnmount

• #親コンポーネント props が値を転送するときにトリガーされる関数が変更されました:componentWillReceiveProps

コードを詳しく説明しましょう

#1. 実装部分 公式のライフサイクル図によると、コンポーネントは、defaultProps と propsTypes で始まります (これら 2 つは次の記事で個別に説明します。ここでは焦点を当てません)
次に、this.state
に constructor と初期データがあります。ここが最初のステップです。次に、componentWillMount コンポーネントのマウントが開始されます これが 2 番目のステップです。次に、コンポーネントがマウントされ、レンダリング解析とレンダリングが行われます。つまり、レンダリング データがすべてレンダリングされます、最後に componentDidMount コンポーネントがマウントされます。

サブコンポーネント コード。親コンポーネントにレンダリングを導入するだけです (ここにはコードはありません)

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

コンソールを開いて表示します

2. データ更新部分 データ更新の最初のステップは、この関数が
true を返した場合のみ、データを更新するかどうかを確認する shouldComponentUpdate です。この関数は 2 つのパラメータ nextProps と nextState を宣言できます。nextProps は親コンポーネントから子コンポーネントに渡される値で、nextState はデータの後にあります。が更新された値であれば、この関数でこれら2つの値を取得できます。
2 番目のステップでは、更新されたデータを確認した後、componentWillUpdate がデータ を更新します。3 番目のステップは引き続き render です。データが変更された場合、レンダリングは再レンダリングされます。 。 4 番目のステップは、componentDidUpdate データ更新が完了したです。 コードに関しては、前の部分に基づいて、サブコンポーネントは this.state で初期データを定義し、このデータをレンダリングでバインドし、このデータを変更するための onClick イベントを宣言するボタンを追加します。このように、データ更新部分の効果がわかりますが、ここでは、煩雑にならないように、コードの最初の部分を削除しています。

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.componentWillReceiveProps については個別に説明します。親コンポーネントで props の値が変更されたときにトリガーされる関数

この関数親コンポーネントが子コンポーネントに値を渡すときに props の値を変更するときにトリガーされる関数です。後半で説明したように、 shouldComponentUpdate 関数は 2 つのパラメーターを取ることができます。 nextProps は親によって渡された値です。コンポーネントを子コンポーネントに変換します。 親コンポーネントに初期タイトル データを定義し、onClick イベントを宣言してタイトルを変更するボタンを記述します。

4.componentWillUnmount 関数は、コンポーネントが子コンポーネントに変換されるときに作成されます。 destroy

親コンポーネントで true のフラグを持つ状態値を定義し、onClick イベントを宣言するボタンを追加します。 このフラグを変更してコンポーネントを破棄します。

親コンポーネント コード:

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;

子コンポーネントの完全なコード:

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

以上がReact のライフサイクル機能とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。