React 生命周期

React生命周期

如图：

一、装载（初始化）过程（Mount）

组件第一次在DOM树渲染的过程

1）getDefaultProps() :

ES5中设置默认的props（ES6中defaultProps设置组件的默认的属性）。

2）getInitialState() :

ES5中初始化state，此时可以访问this.props。

3）componentWillMount() :

在组件被挂载前调用，整个生命周期只执行一次。

4）render()：

渲染组件，创建虚拟DOM，更新DOM树（不能更改state了），必须实现该方法。

5）componentDidMount()：

在组件渲染之后调用，已经生成真实的DOM节点，只执行一次。

二、更新过程（Update）

组件被重新渲染的过程（初始化时均不调用）

1）componentWillReceiveProps(nextProps)：

父组件的render()方法执行后就会调用。

2）shouldComponentUpdate(nextProps, nextState)：

当state或者props改变时调用，有返回值true/false。

若返回true，则继续执行render()；若返回false则放弃本次渲染（对于react性能优化非常重要）。

forceUpDate会越过shouldComponentUpdate(nextProps, nextState)重新渲染。

3）componentWillUpdate(nextProps, nextState)：

只有在组件将要更新时才调用，此时可以修改state。

4）render()：

渲染组件

5）componentDidUpdate()：

组件更新完成后调用，此时可以获取dom节点。

三、卸载过程（Unmount）

组件从DOM树中删除的过程

1）componentWillUnmount()：

组件将要卸载时调用，将组件从DOM树移出，防止内存溢出（如：事件监听、定时器）。

四.例子

1.HTMI

<div id="app"></div>

2.JS

class Components extends React.Component {

constructor(props){
super(props);
this.state = {}
}
componentWillMount(){
console.debug("实例化：componentWillMount")
}
componentDidMount(){
console.debug("实例化：componentDidMount")
}
componentWillReceiveProps(){
console.debug("存在期：componentWillReceiveProps")
}
shouldComponentUpdate(nextProps,nextState){
console.debug("存在期：shouldComponentUpdate",nextProps,nextState)
return true;
}
componentWillUpdate(){
console.debug("存在期：componentWillUpdate")
}
componentDidUpdate(){
console.debug("存在期：componentDidUpdate")
}
render() {
if(!this.props.reRender){
console.debug("实例化：render")
}else{
console.debug("存在期：render")
}
return (
<div>
<br />
请查看下面的console
<br />
</div>
)

}
}
Components.defaultProps = {
text: "hello word",
}
class App extends React.Component{
constructor(props){
super(props);
this.state = {}
}
refresh(){
return (e)=>{
this.setState({
reRender: true,
})
}
}
render(){
return (
<div>
<Components reRender={this.state.reRender}/>
<button onClick={this.refresh()}>
更新Component
</button>
</div>
)
}
}
//这个组件是没有调用的，但是，getDeafultProps直接执行了
var Test = React.createClass({
getDefaultProps: function(){
console.debug("Test组件为调用，直接执行了defaultProps")
return {

}
},
render(){
return (
<div></div>
)
},
})
/*
* Render the above component into the div#app
*/
ReactDOM.render(<App />, document.getElementById('app'));