這次帶給大家React中生命週期使用詳解，React中生命週期使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
React 是一個由虛擬 DOM 渲染成真實 DOM 的過程，這個過程稱為元件的生命週期。 React 把這個週期分成三個階段，每個階段都提供了 will 和 did 兩種處理方式，will 是指發生前，did 是指發生後。
Mounting：元件渲染過程
#componentWillMount()
componentDidMount()
Updating：元件更新過程
#componentWillReceiveProps(nextProps)
#shouldComponentUpdate(nextProps, nextState)
#componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, #object prevProps
componentDidMount
var MountingComponent = React.createClass({
componentWillMount: function(){
console.log(this.refs.h1) // undefined
},
componentDidMount: function(){
console.log(this.refs.h1) // h1 对象
},
render: function(){
return <h1 ref="h1">Lifecycle-Mounting</h1>;
}
})
ReactDOM.render(<MountingComponent />, document.getElementById('p1'));執行順序
##componentWillReceiveProps註：props 不能手動改變，正常場景是當前元件被當子元件調用，然後在父元件中改變該元件的props
shouldComponentUpdate
newState：已更新的 state
方法必須傳回 boolen，傳回 true 則執行後面的 componentWillUpdate、render、componentDidUpdate。反之則不執行。
componentWillUpdate
nextState：將要更新的 state
componentDidUpdate
nextState：更新前的 state
var UpdatingComponent = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
//当 state 发生改变的时候，state 对应的组件会重新挂载
//会触发 componentWillUpdate、componentDidUpdate
this.setState({data: this.state.data + 1})
},
//参数 newProps：已更新的 props
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECEIVE PROPS!', newProps)
},
//参数 newProps：已更新的 props
//参数 newState：已更新的 state
//必须要返回 boolen，true 则执行componentWillUpdate、render、componentDidUpdate。反之则不执行。
shouldComponentUpdate: function(newProps, newState){
console.log('shouldComponentUpdate',newProps, newState);
return (newState.data > 0 && newState.data % 2 == 0);
},
//参数 nextProps：将要更新的 props
//参数 nextState：将要更新的 state
componentWillUpdate: function(nextProps, nextState){
console.log(nextProps, nextState, this.refs.p1)
},
//参数 prevProps：更新前的 props
//参数 nextState：更新前的 state
componentDidUpdate: function(prevProps, prevState){
console.log(prevProps, prevState)
},
render: function(){
return (
<p>
<button onClick={this.setNewNumber}>INCREMENT</button>
<h3>{this.state.data}</h3>
</p>
);
}
})
ReactDOM.render(<UpdatingComponent/>, document.getElementById('p2'));在组件从 DOM 中移除的时候立刻被调用，这个阶段没有对应的 did 方法
方法适用在父子组件的结构中，当某个条件符合的场景下，该子组件会被渲染
getInitialState
componentWillMount
render
componentDidMount
var ChildrenComponent = React.createClass({
componentWillUnmount: function(){
console.log('componentWillUnmount');
},
render: function(){
return <h3>{this.props.myNumber}</h3>
}
})
var UnmountingComponent = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
var content;
//当条件不符合时 ChildrenComponent 会被移除，然后会触发方组件的 componentWillUnmount 方法
//当条件重新符合时，会重新渲染组件 ChildrenComponent
if(this.state.data % 2 == 0){
content = <ChildrenComponent myNumber = {this.state.data}></ChildrenComponent>;
} else {
content = <h3>{this.state.data}</h3>;
}
return (
<p>
<button onClick = {this.setNewNumber}>INCREMENT</button>
{content}
</p>
);
}
})
ReactDOM.render(<UnmountingComponent/>, document.getElementById('p3'));相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是React中生命週期使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
