react的生命周期函數(shù)怎么使用

這篇文章主要介紹“react的生命周期函數(shù)怎么使用”，在日常操作中，相信很多人在react的生命周期函數(shù)怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”react的生命周期函數(shù)怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

react的生命周期函數(shù)有：1、componentWillMount函數(shù)；2、componentDidMount函數(shù)；3、shouldComponentUpdate函數(shù)；4、componentWillUpdate函數(shù)；5、componentDidUpdate函數(shù)；6、componentWillUnmount函數(shù)；7、componentWillReceiveProps函數(shù)。

先來(lái)了解一下react的生命周期函數(shù)有哪些：

• 組件將要掛載時(shí)觸發(fā)的函數(shù)：componentWillMount

• 組件掛載完成時(shí)觸發(fā)的函數(shù)：componentDidMount

• 是否要更新數(shù)據(jù)時(shí)觸發(fā)的函數(shù)：shouldComponentUpdate

• 將要更新數(shù)據(jù)時(shí)觸發(fā)的函數(shù)：componentWillUpdate

• 數(shù)據(jù)更新完成時(shí)觸發(fā)的函數(shù)：componentDidUpdate

• 組件將要銷毀時(shí)觸發(fā)的函數(shù)：componentWillUnmount

• 父組件中改變了props傳值時(shí)觸發(fā)的函數(shù)：componentWillReceiveProps

下面來(lái)上代碼詳細(xì)說(shuō)明一下

一.掛載部分
根據(jù)官方生命周期圖我們可以看到，一個(gè)組件的加載渲染，首先是defaultProps和propsTypes然后就是constructor及this.state里的初始數(shù)據(jù)，所以到這里是第一步。接著就是componentWillMount 組件將要開(kāi)始掛載了，這是第二步。然后組件掛載，render解析渲染，所以第三步呼之欲出，就是render數(shù)據(jù)都渲染完成，最后componentDidMount
組件掛載完成。

子組件代碼，父組件內(nèi)引入渲染即可（這里先不上代碼）

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		console.log('01構(gòu)造函數(shù)')		
		super(props)
		this.state={
			
		}
	}
	//組件將要掛載時(shí)候觸發(fā)的生命周期函數(shù)
	componentWillMount(){
		console.log('02組件將要掛載')
	}
	//組件掛載完成時(shí)候觸發(fā)的生命周期函數(shù)
	componentDidMount(){
		console.log('04組件將要掛載')
	}
	render(){
		console.log('03數(shù)據(jù)渲染render')
		return(
			<div>
				生命周期函數(shù)演示
			</div>
		) 
	}
}
export default Smzq

打開(kāi)控制臺(tái)查看

二.數(shù)據(jù)更新部分
數(shù)據(jù)更新的話第一步是shouldComponentUpdate確認(rèn)是否要更新數(shù)據(jù)，當(dāng)這個(gè)函數(shù)返回的是true的時(shí)候才會(huì)進(jìn)行更新，并且這個(gè)函數(shù)可以聲明兩個(gè)參數(shù)nextProps和nextState，
nextProps是父組件傳給子組件的值，nextState是數(shù)據(jù)更新之后值，這兩個(gè)值可以在這個(gè)函數(shù)中獲取到。第二步當(dāng)確認(rèn)更新數(shù)據(jù)之后componentWillUpdate將要更新數(shù)據(jù)，第三步依舊是render，數(shù)據(jù)發(fā)生改變r(jià)ender重新進(jìn)行了渲染。第四步是componentDidUpdate數(shù)據(jù)更新完成。

代碼的話子組件在上一部分的基礎(chǔ)上，在this.state中定義一個(gè)初始數(shù)據(jù)，render中綁定一下這個(gè)數(shù)據(jù)，之后再增加一個(gè)按鈕聲明一個(gè)onClick事件去改變這個(gè)數(shù)據(jù)。這樣可以看到數(shù)據(jù)更新部分的效果，我這里把第一部分的代碼刪掉了，看著不那么亂。

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		super(props)
		this.state={
			msg:'我是一個(gè)msg數(shù)據(jù)'
		}
	}
	//是否要更新數(shù)據(jù)，如果返回true才會(huì)更新數(shù)據(jù)
	shouldComponentUpdate(nextProps,nextState){
		console.log('01是否要更新數(shù)據(jù)')
		console.log(nextProps)		//父組件傳給子組件的值，這里沒(méi)有會(huì)顯示空
		console.log(nextState)		//數(shù)據(jù)更新后的值
		return true;				//返回true，確認(rèn)更新
	}
	//將要更新數(shù)據(jù)的時(shí)候觸發(fā)的
	componentWillUpdate(){
		console.log('02組件將要更新')
	}
	//更新數(shù)據(jù)時(shí)候觸發(fā)的生命周期函數(shù)
	componentDidUpdate(){
		console.log('04組件更新完成')
	}
	//更新數(shù)據(jù)
	setMsg(){
		this.setState({
			msg:'我是改變后的msg數(shù)據(jù)'
		})
	}
	render(){
		console.log('03數(shù)據(jù)渲染render')
		return(
			<div>
				{this.state.msg}
				<br/>
				<hr/>
				<button onClick={()=>this.setMsg()}>更新msg的數(shù)據(jù)</button>
			</div>
		) 
	}
}
export default Smzq

三.單獨(dú)說(shuō)一下componentWillReceiveProps，父組件中改變了props傳值時(shí)觸發(fā)的函數(shù)
這個(gè)函數(shù)也就是當(dāng)我們父組件給子組件傳值的時(shí)候改變了props的值時(shí)觸發(fā)的函數(shù)，剛才在第二部分中也說(shuō)到shouldComponentUpdate這個(gè)函數(shù)可以攜帶兩個(gè)參數(shù)，nextProps就是父組件傳給子組件的值
在父組件中定義一個(gè)初始title數(shù)據(jù)，寫(xiě)一個(gè)按鈕聲明一個(gè)onClick事件去改變這個(gè)title

四.componentWillUnmount組件將要銷毀時(shí)的函數(shù)
在父組件中定義一個(gè)flag為true的狀態(tài)值，添加一個(gè)按鈕聲明一個(gè)onClick事件去
更改這個(gè)flag實(shí)現(xiàn)銷毀組件。

父組件代碼：

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

class App extends Component {
	constructor(props){
		super(props)
		this.state={
			flag:true,
			title:"我是app組件的標(biāo)題"
		}
	}
	//創(chuàng)建/銷毀組件
	setFlag(){
		this.setState({
			flag:!this.state.flag
		})
	}
	//改變title
	setTitle(){
		this.setState({
			title:'我是app組件改變后的title'
		})
	}
  	render() {
	    return (
	      <div className="App">
				{
					this.state.flag?<Smzq title={this.state.title}/>:''
				}
				<button onClick={()=>this.setFlag()}>掛載/銷毀生命周期函數(shù)組件</button>
				<button onClick={()=>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:'我是一個(gè)msg數(shù)據(jù)'
		}
	}
	//組件將要掛載時(shí)候觸發(fā)的生命周期函數(shù)
	componentWillMount(){
		console.log('02組件將要掛載')
	}
	//組件掛載完成時(shí)候觸發(fā)的生命周期函數(shù)
	componentDidMount(){
		//Dom操作，請(qǐng)求數(shù)據(jù)放在這個(gè)里面
		console.log('04組件掛載完成')
	}
	//是否要更新數(shù)據(jù)，如果返回true才會(huì)更新數(shù)據(jù)
	shouldComponentUpdate(nextProps,nextState){
		console.log('01是否要更新數(shù)據(jù)')
		console.log(nextProps)		//父組件傳給子組件的值，這里沒(méi)有會(huì)顯示空
		console.log(nextState)		//數(shù)據(jù)更新后的值
		return true;				//返回true，確認(rèn)更新
	}
	//將要更新數(shù)據(jù)的時(shí)候觸發(fā)的
	componentWillUpdate(){
		console.log('02組件將要更新')
	}
	//更新數(shù)據(jù)時(shí)候觸發(fā)的生命周期函數(shù)
	componentDidUpdate(){
		console.log('04組件更新完成')
	}
	//你在父組件里面改變props傳值的時(shí)候觸發(fā)的函數(shù)
	componentWillReceiveProps(){
		console.log('父子組件傳值，父組件里面改變了props的值觸發(fā)的方法')
	}
	setMsg(){
		this.setState({
			msg:'我是改變后的msg數(shù)據(jù)'
		})
	}
	//組件將要銷毀的時(shí)候觸發(fā)的生命周期函數(shù)，用在組件銷毀的時(shí)候執(zhí)行操作
	componentWillUnmount(){
		console.log('組件銷毀了')
	}
	render(){
		console.log('03數(shù)據(jù)渲染render')
		return(
			<div>
				生命周期函數(shù)演示--{this.state.msg}--{this.props.title}
				<br/>
				<hr/>
				<button onClick={()=>this.setMsg()}>更新msg的數(shù)據(jù)</button>
			</div>
		) 
	}
}
export default Smzq

點(diǎn)擊掛載/銷毀生命周期函數(shù)組件這個(gè)按鈕的時(shí)候
子組件消失，控制臺(tái)打?。航M件銷毀了。

當(dāng)父組件給子組件傳值時(shí)

這里nextProps這個(gè)就有上圖劃紅線的值了。
那么我們?cè)冱c(diǎn)擊改變app組件的title這個(gè)按鈕

這里可以看到componentWillReceiveProps這個(gè)函數(shù)被觸發(fā)了，nextProps這個(gè)值也發(fā)生了改變。

到此，關(guān)于“react的生命周期函數(shù)怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！