生命周期

任何事物都不會憑空產(chǎn)生，也不會無故消亡。一個(gè)事物從產(chǎn)生到消亡經(jīng)理的各個(gè)階段，我們稱之為 生命周期。

具體到我們的前端組件上來，一個(gè)組件的生命周期可以大體分為創(chuàng)建、更新、銷毀這個(gè)三個(gè)階段。

本文主要介紹React 的組件生命周期，并以最新發(fā)布的v16為分水嶺，介紹前后生命周期函數(shù)的變化。

組件生命周期

在React代碼里，我們通常通過繼承React.Component這個(gè)抽象基礎(chǔ)類來定義一個(gè)有生命周期函數(shù)的組件（函數(shù)式生命無法自定義生命周期函數(shù)），react官方將其生命周期分為以下三個(gè)階段：

裝載

這個(gè)階段是指組件初始化并插入DOM中，主要包含以下函數(shù)：

constructor() static getDerivedStateFromProps() componentWillMount() / UNSAFE_componentWillMount() render() componentDidMount()

更新

當(dāng)組件狀態(tài)發(fā)生變化時(shí)，會觸發(fā)一次更新

componentWillReceiveProps() / UNSAFE_componentWillReceiveProps() static getDerivedStateFromProps() shouldComponentUpdate() componentWillUpdate() / UNSAFE_componentWillUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()

銷毀

當(dāng)組件從DOM中移除時(shí)，啟動(dòng)銷毀：

componentWillUnmount()

具體如下圖：

如上圖所示，綠色背景為v16版本新增的生命周期函數(shù)，黃色背景的的為v16版本建議棄用，并在后續(xù)版本中會刪除的生命周期函數(shù)。

其中g(shù)etDerivedStateFromProps是一個(gè)靜態(tài)函數(shù)，用來替換原來的componentWillMount函數(shù)，可以在這個(gè)靜態(tài)函數(shù)中將props里的屬性添加到state中去，這里應(yīng)該是一個(gè)純函數(shù)。

getSnapshotBeforeUpdate用來做一些必須要修改真實(shí)DOM的操作，雖然不建議這么做。

One more thing

React 同時(shí)提供一個(gè)componentDidCatch函數(shù)，來表明當(dāng)前組件是一個(gè)邊界錯(cuò)誤處理組件，具體可以參考錯(cuò)誤邊界

參考鏈接

總結(jié)

以上是生活随笔為你收集整理的React 重温之 组件生命周期的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。