- 掛載時(shí)
- 更新時(shí)
-
- setState觸發(fā)更新、父組件重新渲染時(shí)觸發(fā)更新
- forceUpdate觸發(fā)更新
- 卸載時(shí)
react（v17.0.2）的生命周期圖譜如下。?
相較于16版本，17版本生命周期函數(shù)有如下變化：
componentWillMount()
componentWillUpdate()
componentWillReceiveProps()
+getDerivedStateFromProps(props,state)
+getSnapshotBeforeUpdate(prevProps,prevState)
雖然UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps當(dāng)前依然可用，但在react未來的版本中可能被移除，所以盡量避免使用。更多可以訪問如下鏈接：
?https://react.docschina.org/docs/react-component.html。
https://react.docschina.org/blog/2018/03/27/update-on-async-rendering.html。
掛載時(shí)
組件掛載時(shí)，會(huì)依次調(diào)用如下生命周期函數(shù)：
constructor(props)static getDerivedStateFromProps(props)render()componentDidMount()
?其中，getDerivedStateFromProps必須用static修飾，它是類上的方法。且必須返回null或者狀態(tài)對(duì)象（State Obect）。
getDerivedStateFromProps在實(shí)際開發(fā)中幾乎不用，僅適用于state唯一取決于props的場景。
更新時(shí)
setState觸發(fā)更新、父組件重新渲染時(shí)觸發(fā)更新
setState、父組件重新渲染觸發(fā)更新時(shí)，會(huì)依次調(diào)用如下生命周期函數(shù)：
1、static getDerivedStateFromProps()
2、shouldComponentUpdate(nextProps,nextState)
3、render()
4、getSnapshotBeforeUpdate(prevProps,prevState)
5、componentDidUpdate(prevProps,prevState,snapshot)
其中，getSnapshotBeforeUpdate(prevProps,prevState)必須返回null或任意快照值(Snapshot Value，undefined除外)。返回的快照值將作為componentDidUpdate的第三個(gè)形參。
forceUpdate觸發(fā)更新
forceUpdate觸發(fā)更新，會(huì)依次調(diào)用以下生命周期函數(shù)：
static getDerivedStateFromProps()render()getSnapshotBeforeUpdate()componentDidUpdate()
卸載時(shí)
組件卸載時(shí)，會(huì)調(diào)用生命周期函數(shù)：文章來源：http://www.zghlxwxcb.cn/news/detail-682148.html
componentWillUnmount()
文章來源地址http://www.zghlxwxcb.cn/news/detail-682148.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Count extends React.Component{
constructor(props){
console.log("Count---constructor");
super(props);
this.state = {
count:0
}
}
componentDidMount(){
console.log("Count---componentDidMount");
}
static getDerivedStateFromProps(){
console.log("Count---getDerivedStateFromProps");
return null;
}
shouldComponentUpdate(){
console.log("Count---shouldComponentUpdate");
return true;
}
getSnapshotBeforeUpdate(){
console.log("Count---getSnapshotBeforeUpdate");
return null;
}
componentDidUpdate(){
console.log("Count---componentDidUpdate");
}
componentWillUnmount(){
console.log("Count---componentWillUnmount");
}
death = () => {
ReactDOM.unmountComponentAtNode(document.getElementById("app"));
}
add = () => {
const {count} = this.state;
this.setState({
count:count+1
})
}
force = () => {
this.forceUpdate();
}
render(){
console.log("Count---render");
const {count} = this.state;
const {add,death,force} = this;
return (
<div>
<h2>當(dāng)前值為：{count}</h2>
<button onClick={add}>點(diǎn)我加1</button>
<button onClick={force}>強(qiáng)制更新</button>
<button onClick={death}>卸載組件</button>
</div>
)
}
}
ReactDOM.render(<Count/>,document.getElementById("app"));
</script>
</body>
</html>到了這里，關(guān)于react17：生命周期函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Angular 基礎(chǔ)] - 生命周期函數(shù)](https://imgs.yssmx.com/Uploads/2024/02/828160-1.png)
