React のライフサイクル機能とは何ですか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

藏色散人

Jan 03, 2023 am 10:15 AM

react

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

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

このチュートリアルの動作環境: 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

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

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

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

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

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

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

当父组件给子组件传值时
React のライフサイクル機能とは何ですか?