组件的生命周期分成三个状态
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
三种状态共计五种处理函数
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
React 还提供两种特殊状态的处理函数
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object
nextState):组件判断是否重新渲染时调用
示例
<script type="text/babel">
var MyInput=React.createClass({
getInitialState:function () {
return {value:""}
},
componentWillMount:function(){
console.log('组件准备去挂载');
console.log(this.refs.MyValue);
},
componentDidMount:function () {
console.log('组件已经挂载完毕');
console.log(this.refs.MyValue);
},
componentWillUpdate:function (nextProps,nextState) {
console.log('nextState',nextState);
},
componentDidUpdate:function (prevProps,prevState) {
console.log('prevState',prevState);
},
handleChange:function(){
this.setState({
value:this.refs.MyValue.value
})
},
render:function () {
return <div>
<input onChange={this.handleChange} type="text" ref="MyValue"/>
</div>
}
})
ReactDOM.render(
<MyInput></MyInput>,
document.getElementById("container")
)
</script>