快捷導(dǎo)航

React組件的生命周期深入理解分析

更新時(shí)間：2022年12月01日 09:41:09 作者：花鐺

組件的生命周期就是React的工作過程，就好比人有生老病死，自然界有日月更替，每個(gè)組件在網(wǎng)頁(yè)中也會(huì)有被創(chuàng)建、更新和刪除，如同有生命的機(jī)體一樣

<-- 容器!-->
<div id="test"></div>
// 創(chuàng)建組件
class Life extends React.Component{
	state = {opacity:1}
	// 調(diào)用時(shí)機(jī)：組件掛載完畢
	componentDidMount(){
		this.timer = setInterval(() => {
			let {opacity} = this.state
			opacity -= 0.1
			if(opacity <= 0) opacity = 1
			this.setState({opacity})
		}, 200);
	}
	//調(diào)用時(shí)機(jī)：組件將要卸載
	componentWillUnmount(){
		clearInterval(this.timer)
	}
	handleUnmount = ()=>{
		//卸載組件
		ReactDOM.unmountComponentAtNode(document.getElementById('test'))
	}
	//調(diào)用時(shí)機(jī)：初始化渲染、狀態(tài)更新之后
	render(){
		return(
			<div>
				<h2 style={{opacity:this.state.opacity}}>我是一段透明度會(huì)變化的文字</h2>
				<button onClick={this.handleUnmount}>點(diǎn)擊卸載</button>
			</div>
		)
	}
}
//渲染組件
ReactDOM.render(<Life/>,document.getElementById('test'))

生命周期鉤子(新)

新的生命周期鉤子增加了 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。

constructor()：constructor() 構(gòu)造函數(shù)在 React 組件掛載之前被調(diào)用。

如果不初始化 state 或不為事件處理函數(shù)綁定實(shí)例，則不需要寫 constructor()。

不能在 constructor() 構(gòu)造函數(shù)內(nèi)部調(diào)用 this.setState()，因?yàn)榇藭r(shí)第一次 render() 還未執(zhí)行，也就意味 DOM 節(jié)點(diǎn)還未掛載。

static getDerivedStateFromProps(nextProps, prevState)：在每次調(diào)用 render() 方法之前都會(huì)被調(diào)用，在初始化和更新時(shí)都會(huì)被調(diào)用。

getDerivedStateFromProps() 第一個(gè)參數(shù)為即將更新的 props，第二個(gè)參數(shù)為上一個(gè)狀態(tài)的 state，可以比較 props 和 state 來(lái)加一些限制條件，防止無(wú)用的 state 更新。

getDerivedStateFromProps() 的返回值是必須的。返回一個(gè)對(duì)象來(lái)更新 state，如果不需要更新，返回 null 即可。 getDerivedStateFromProps() 適用于 state 的值在任何時(shí)候都取決于 props 的情況。 getDerivedStateFromProps() 是一個(gè)靜態(tài)函數(shù)，是放在組件身上的，而不是放在組件實(shí)例身上，因此不能使用 this。

// 之前使用 componentWillReceiveProps
componentWillReceiveProps(nextProps) {
    if (nextProps.location.search !== this.props.location.search) {
    	this.init()
    }
}
// 現(xiàn)在使用 getDerivedStateFromProps：相當(dāng)于把 componentWillReceiveProps 拆分成 getDerivedStateFromProps 和 componentDidUpdate
static getDerivedStateFromProps(nextProps, prevState) {
  const {search} = nextProps.location
  if (search !== prevState.search) {
    return {
      search,
    }
  }
  return null
}
componentDidUpdate(prevProps, prevState) {
  const {search} = this.state
   if (search !== prevState.search) {
    this.init()
  }
}

render()：render() 方法是類組件中唯一必須實(shí)現(xiàn)的方法，用于渲染 DOM，render() 方法必須返回 reactDOM。

在 render() 的 return 之前不能寫 setState，否則會(huì)觸發(fā)死循環(huán)導(dǎo)致內(nèi)存崩潰；return 體里面是可以寫的。

// Wrong
render(){
	this.setState({...})
	return (...)
}
// Correct
render(){
	return (
		<input onClick={()=>this.setState({...})} />
   )
}

componentDidMount()：在組件掛載后 (插入 DOM 樹后) 立即調(diào)用，此生命周期是發(fā)送網(wǎng)絡(luò)請(qǐng)求、開啟定時(shí)器、訂閱消息等的好時(shí)機(jī)，并且可以在此鉤子函數(shù)里直接調(diào)用 setState()。

shouldComponentUpdate(nextProps, nextState)：在組件更新之前調(diào)用，可以控制組件是否進(jìn)行更新，返回 true 時(shí)組件更新，返回 false 則不更新。不寫此生命周期鉤子時(shí)默認(rèn)為 true。

shouldComponentUpdate() 第一個(gè)參數(shù)是即將更新的 props 值，第二個(gè)參數(shù)是即將更新后的 state 值，可以根據(jù)更新前后的 props 或 state 來(lái)比較加一些限制條件，決定是否更新，進(jìn)行性能優(yōu)化。

不要在 shouldComponentUpdate 中調(diào)用 setState()，否則會(huì)導(dǎo)致無(wú)限循環(huán)調(diào)用更新、渲染，直至瀏覽器內(nèi)存崩潰。

getSnapshotBeforeUpdate(prevProps, prevState)：在最新的渲染數(shù)據(jù)提交給 DOM 前會(huì)調(diào)用，也就是說，在 render 之后，在 componentDidUpdate 之前調(diào)用。使得組件可以在更新之前獲取快照值。不常用。

它可以使組件在 DOM 真正更新之前捕獲一些信息（例如滾動(dòng)位置），此生命周期返回的任何值都會(huì)作為參數(shù)傳遞給 componentDidUpdate()，如不需要傳遞任何值，那么返回 null。返回值是必須的。

componentDidUpdate(prevProps, prevState, snapshot)：componentDidUpdate() 會(huì)在更新后會(huì)被立即調(diào)用。首次渲染不會(huì)執(zhí)行。

包含三個(gè)參數(shù)，第一個(gè)是上一次props值。第二個(gè)是上一次state值，第三個(gè)是“snapshot” 參數(shù)傳遞。

可以進(jìn)行前后 props 的比較進(jìn)行條件語(yǔ)句的限制，來(lái)進(jìn)行 setState() , 否則會(huì)導(dǎo)致死循環(huán)。

componentWillUnmount()：componentWillUnmount() 在組件即將被卸載或銷毀時(shí)進(jìn)行調(diào)用。此生命周期是清理定時(shí)器、取消訂閱等操作的好時(shí)機(jī)。

組件的掛載流程：

constructor
getDerivedStateFromProps
render
componentDidMount

setState 更新流程：

getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate

組件的卸載流程： componentWillUnmount

生命周期鉤子(舊)

React 從 v16.3 開始廢棄 componentWillMount、componentWillReceiveProps、componentWillUpdate 三個(gè)鉤子函數(shù)。在新版本中使用需要加上 UNSAFE_ 前綴，否則會(huì)觸發(fā)控制臺(tái)的警告。

UNSAFE 不是指安全性，而是表示使用這些生命周期的代碼在 React 的未來(lái)版本中更有可能出現(xiàn) Bug，尤其是在啟用異步渲染之后。

組件的掛載流程：

constructor
componentWillMount
render
componentDidMount

setState 更新流程：

shouldComponentUpdate
componentWillUpdate（組件更新之前調(diào)用）
render
componentDidUpdate

forceUpdate 強(qiáng)制更新流程：

componentWillUpdate（組件更新之前調(diào)用）
render
componentDidUpdate

父組件 render 之后子組件的更新流程：

componentWillReceiveProps（子組件接收到新的 props 之前調(diào)用，第一次接收到 props 不會(huì)調(diào)用）

componentWillReceiveProps(nextProps) {
	// 可以和 this.props 中的數(shù)據(jù)進(jìn)行對(duì)比，以決定是否要執(zhí)行某些方法
}

shouldComponentUpdate
componentWillUpdate（組件更新之前調(diào)用）
render
componentDidUpdate

組件的卸載流程：

componentWillUnmount

父子組件生命周期

當(dāng)子組件自身的 state 狀態(tài)改變，不會(huì)對(duì)父組件產(chǎn)生副作用的情況下，父組件不會(huì)進(jìn)行更新，也就是不會(huì)觸發(fā)父組件的生命周期。

當(dāng)父組件狀態(tài)變化時(shí)（不會(huì)是否更改到傳給子組件的 props），會(huì)觸發(fā)自身和子組件對(duì)應(yīng)的生命周期。

render 以及 render 之前的生命周期，父組件先執(zhí)行；

render 之后的生命周期，子組件先執(zhí)行，并且是與父組件交替執(zhí)行。

父子組件初始化流程：

父組件constructor
父組件getDerivedStateFromProps
父組件render
子組件constructor
子組件getDerivedStateFromProps
子組件render
子組件componentDidMount
父組件componentDidMount

子組件修改自身的 state 狀態(tài)流程:

子組件getDerivedStateFromProps
子組件shouldComponentUpdate
子組件render
子組件getSnapshotBeforeUpdate
子組件componentDidUpdate

父組件修改 state 狀態(tài)流程：

父組件getDerivedStateFromProps
父組件shouldComponentUpdate
父組件render
子組件getDerivedStateFromProps
子組件shouldComponentUpdate
子組件render
子組件getSnapshotBeforeUpdate
父組件getSnapshotBeforeUpdate
子組件componentDidUpdate
父組件componentDidUpdate

父組件卸載子組件：

// 通過點(diǎn)擊父組件中的 [卸載 / 掛載子組件] 按鈕來(lái)卸載子組件
handelToggle = () => {
    this.setState({
      isHidden: !this.state.isHidden
    })
  }
<button onClick={this.handelToggle}>掛載/卸載子組件</button>
{this.state.isHidden ? '' : <Child />>}