react的生命週期函數有哪些

react的生命週期函數有：1、componentWillMount函數；2、componentDidMount函數；3、shouldComponentUpdate函數；4、componentWillUpdate函數；5、componentDidUpdate函數；6、componentWillUnmounts；7、componentWillReceiveProps函數。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react的生命週期函數有哪些？

react的生命週期函數（超詳細）

話不多說，直接進入正題！

先來了解react的生命週期函數有哪些：

• #元件會掛載時觸發的函數：componentWillMount

• #元件掛載完成時觸發的函數：componentDidMount

• #是否要更新資料時觸發的函數：shouldComponentUpdate

• 將要更新資料時觸發的函數：componentWillUpdate

• 資料更新完成時觸發的函數：componentDidUpdate

• 元件會銷毀時觸發的函數：componentWillUnmount

• #父元件中改變了props傳值時觸發的函數：componentWillReceiveProps

#下面來上程式碼詳細說明

一.掛載部分
根據官方生命週期圖我們可以看到，一個元件的載入渲染，首先是defaultProps和propsTypes，（這兩個是什麼下一篇會單獨說，這裡也不是重點）
然後就是constructor及this.state裡的初始資料，所以到這裡是第一步。接著就是componentWillMount 元件將要開始掛載了，也就是第二步。然後元件掛載，render解析渲染，所以第三步呼之欲出，就是render資料都渲染完成，最後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

開啟控制台查看

二.資料更新部分
資料更新的話第一步是shouldComponentUpdate確認是否要更新資料，當這個函數傳回的是true的時候才會進行更新，而這個函數可以宣告兩個參數nextProps和nextState，
nextProps是父元件傳給子元件的值，nextState是資料更新之後值，這兩個值可以在這個函數中取得。 第二步當確認更新資料之後componentWillUpdate將要更新資料，第三步依舊是render，資料改變render重新進行了渲染。第四步是componentDidUpdate資料更新完成。

程式碼的話子元件在上一部分的基礎上，在this.state中定義一個初始數據，render中綁定一下這個數據，之後再增加一個按鈕聲明一個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

三.單獨說一下componentWillReceiveProps，父元件中改變了props傳值時觸發的函數
這個函數也就是當我們父元件給子元件傳值的時候改變了props的值時觸發的函數，剛才在第二部分也說到shouldComponentUpdate這個函數可以攜帶兩個參數，nextProps就是父元件傳給子元件的值
在父元件中定義一個初始title數據，寫一個按鈕宣告一個onClick事件去改變這個title

#四.componentWillUnmount元件會銷毀時的函數
在父元件中定義一個flag為true的狀態值，加上一個按鈕宣告一個onClick事件去
更改這個flag實作銷毀元件。

父元件程式碼：

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中文網其他相關文章！