本文主要跟大家分享React元件生命週期，React元件的生命週期有一堆相關的函數，其實就是一推的鉤子函數。在React組件所建立的各個階段觸發特定的鉤子函數。希望能幫助大家。
可以先大概看一下下面這張圖：
#constructor
#建構函數，在建立元件的時候呼叫一次。
constructor(props, context)
登入後複製
componentWillMount
#在元件掛載之前呼叫一次。如果在這個函數裡面呼叫setState，render()知道state會發生變化，並且只渲染一次。
void componentWillMount()
登入後複製
render
render是一個React元件所不可或缺的核心函數。不要在render裡面修改state。也不要去讀寫DOM或與伺服器交互，保持render()方法的純淨。
ReactElement render()
登入後複製
componentDidMount
#在元件掛載之後呼叫一次。這時候，子元件也都掛載好了，可以在這裡使用refs。
void componentDidMount()
登入後複製
shouldComponentUpdate
#這個方法在初始化render時不會執行，當props或state發生變化時執行。函數預設回傳true，需要重新render。返回false，就不會重新render了。 componentWillUpdate和componentDidUpdate方法也不會被呼叫。在比較複雜的應用程式裡，有一些資料的改變並不影響介面展示，可以在這裡做判斷，優化渲染效率。
boolean shouldComponentUpdate(
object nextProps, object nextState
)
登入後複製
componentWillUpdate
#shouldComponentUpdate傳回true之後，componentWillUpdate會被呼叫。要特別注意的是，在這個函數裡面，不要用this.setState來修改狀態。不然這個函數會無限循環執行。這個函數呼叫之後，就會把nextProps和nextState分別設定在this.props和this.state。緊接著這個函數，就會呼叫render()來更新介面了。
void componentWillUpdate(
object nextProps, object nextState
)
登入後複製
componentDidUpdate
#除了首次render之後呼叫componentDidMount，其它render結束之後都是呼叫componentDidUpdate。
void componentDidUpdate()
登入後複製
componentWillReceiveProps
#props是父元件傳遞給子元件的。父元件發生render的時候子元件就會呼叫componentWillReceiveProps（不管props有沒有更新，也不管父子元件之間有沒有資料交換）。在這個回呼函數裡面，你可以根據屬性的變化，透過呼叫this.setState()來更新你的元件狀態，舊的屬性還是可以透過this.props來取得,這裡呼叫更新狀態是安全的，並不會觸發額外的render調用。
void componentWillReceiveProps(nextProps) {
this.setState({...});
}登入後複製
componentWillUnmount
#當元件要被從介面移除的時候，就會呼叫componentWillUnmount(),在這個函數中，可以做一些組件相關的清理工作，例如取消計時器、網路請求等。
void componentWillUnmount()
登入後複製
下面是React元件生命週期的測試範例
var React = require('react');
var ReactDOM = require('react-dom');
class Parent extends React.Component {
constructor(){
super()
console.log("%cparent -- constructor","color:green");
this.state = {
name : 'Lucy'
}
}
componentWillMount(){
console.log("%cparent -- componentWillMount","color:green");
}
componentDidMount(){
console.log("%cparent -- componentDidMount","color:green");
}
componentWillReceiveProps(){
console.log("%cparent -- componentWillReceiveProps","color:green");
}
shouldComponentUpdate(){
console.log("%cparent -- shouldComponentUpdate","color:green");
return true;
}
componentWillUpdate(){
console.log("%cparent -- componentWillUpdate","color:green");
}
componentDidUpdate(){
console.log("%cparent -- componentDidUpdate","color:green");
}
componentWillUnmount(){
console.log("%cparent -- componentWillUnmount","color:green");
}
changeName(){
this.setState({name : 'Jone'})
}
unmountComponent(){
ReactDOM.unmountComponentAtNode(document.getElementById("app"));
}
render(){
console.log("%cparent -- render","color:green");
return(
<p style={{border:'1px solid #000',color:'green'}}>
<h2>Parent:</h2>
<h3>hello {this.state.name}</h3>
<button onClick={this.changeName.bind(this)}>state改变</button>
<button onClick={this.unmountComponent.bind(this)}>卸载组件</button>
<Child props1="haha"></Child>
</p>
)
}
}
class Child extends React.Component {
constructor(){
super()
console.log(" %cchild -- constructor","color:blue");
this.state = {
}
}
componentWillMount(){
console.log(" %cchild -- componentWillMount","color:blue");
}
componentDidMount(){
console.log(" %cchild -- componentDidMount","color:blue");
}
componentWillReceiveProps(){
console.log(" %cchild -- componentWillReceiveProps","color:blue");
}
shouldComponentUpdate(){
console.log(" %cchild -- shouldComponentUpdate","color:blue");
return true;
}
componentWillUpdate(){
console.log(" %cchild -- componentWillUpdate","color:blue");
}
componentDidUpdate(){
console.log(" %cchild -- componentDidUpdate","color:blue");
}
componentWillUnmount(){
console.log(" %cchild -- componentWillUnmount","color:blue");
}
changeName(){
this.setState({name : 'Jone'})
}
render(){
console.log(" %cchild -- render","color:blue");
return(
<p style={{border:'1px solid #000',margin:'10px',color:'blue'}}>
<h2>Child:</h2>
</p>
)
}
}
ReactDOM.render(
<Parent></Parent>,
document.getElementById('app')
);登入後複製
測試範例截圖如下：
改變父元件的state:
#卸載元件後：
#相關推薦：
微信小程式生命週期詳解
React元件的生命週期函數是什麼
React Native 中元件生命週期的簡單介紹
以上是React組件生命週期實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
