React组件的生命周期

概述

React组件的生命周期就是React组件从创建到消亡的过程。大致分为三个阶段：

1.Mounting    组件装载和初始化
2.Updating    组件更新
3.Unmounting  组件卸载

图例

生命周期函数及其用法

constructor(props, context){...}

此函数对应图中getInitialState方法，由于React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现。该函数为组件的构造函数，用于初始化组件状态（state），在组件创建的时候调用一次，在组件的整个生命周期只调用一次。方法中不可以使用setState方法

componentWillMount(){...}

在组件装载（render）之前调用一次。在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且该方法在组件生命周期只调用一次。在本方法中可以使用fetch异步请求加载操作。

componentDidMount(){...}

组件装载（render）完成后调用一次，此时子组件也已经装载完成，可以在该方法中使用refs。也可以使用setState方法，该方法在组件生命周期中只调用一次。

componentWillReceiveProps(nextProps){...}

props是通过父组件传递给子组件的。当父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。此方法用于更新组件数据。方法中可以使用setState，并且在组件的生命周期中可能被调用多次。

bool shouldComponentUpdate(nextProps, nextState){...}

注意本方法是唯一一个包含返回值的生命周期函数，其他函数返回值都为void。组件装载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。方法内不可以使用setState函数。

componentWillUpdate(nextProps, nextState){...}

shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

render(){...}

render即为组件渲染函数，render中不能使用setState

componentDidUpdate(prevProps,prevState){...}

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。函数内不可使用setState 方法。

componentWillUnmount(){...}

组件即将卸载时调用。一般在componentDidMount注册的监听事件需要在该方法中注销删除，以免不必要的错误。

实例

/**
* 生命周期函数示例.
*
*/
import React from 'react';
/**
* 父组件
*/
export default class LifeCircle extends React.Component{

constructor(props){
super(props);
this.state=({
propsToChild:1
})
}

addCount=()=>{
this.setState({
propsToChild:this.state.propsToChild+1
})
}

render(){
return (
<div>
<button onClick={this.addCount}>累加计数值</button>
<LifeCircleChild currentCount={this.state.propsToChild}></LifeCircleChild>
</div>
)
}
}

/**
* 生命周期组件
*/
class LifeCircleChild extends React.Component{
/**
* 构造函数，初始化state.
* @param  props
* @return void
*/
constructor(props){
super(props);
this.state=({
currentCount:props.currentCount,//计数,来自父组件
width:0,//当前文档body宽度
height:0,//当前文档body高度
})
}

/**
* 组件render前执行的函数，在此函数中可以执行一些异步请求并setState.
* @return void
*/
componentWillMount(){
//异步请求，返回值内容为 {currentCountResult:1}
fetch('/currentCount.json')
.then((res)=> res.json())
.then((json)=>{
this.setState({
currentCount:json.currentCountResult
})
});
}

/**
* 组件render之后执行，通常在此方法中注册一些监听事件.
* @return void
*/
componentDidMount(){
//添加浏览器窗口resize监听事件，通知this.onWindowResize方法.
window.addEventListener('resize', this.onWindowResize);
}

/**
* 当父组件render后调用，根据父组件的值重新渲染组件状态（state）.
* @param  Object nextProps [父组件传来的参数对象]
* @return void
*/
componentWillReceiveProps(nextProps){
this.setState({
currentCount:nextProps.currentCount
})
}

/**
* 判断是否需要重新渲染组件,true为渲染，本方法中当计数能被3整除时，不渲染组件.
* @param  Object nextProps [将要渲染的props]
* @param  Object nextState [将要渲染的状态]
* @return boolean           [是否渲染]
*/
shouldComponentUpdate(nextProps, nextState){
if(nextState.currentCount%3===0){
return false;
}
return true;
}

/**
* shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用.
* @param  Object nextProps [this.props = nextProps]
* @param  Object nextState [this.state = nextState]
* @return void
*/
componentWillUpdate(nextProps, nextState){
console.log(nextProps);
console.log(nextState);
}

/**
* 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。函数内不可使用setState 方法.
* @param  Object prevProps
* @param  Object prevState
* @return void
*/
componentDidUpdate(prevProps,prevState){
console.log(prevProps);
console.log(prevState);
}

/**
* 组件即将卸载时调用。一般在
ae54
componentDidMount注册的监听事件需要在该方法中注销删除，以免不必要的错误.
* @return void
*/
componentWillUnmount(){
//在组件即将销毁的时候取消resize的监听
window.removeEventListener('resize', this.onWindowResize);
}

/**
* 当浏览器窗口大小发生变化时，获得文档body的宽度和高度.
* @return void
*/
onWindowResize=()=>{
let width = document.body.offsetWidth;
let height = document.body.offsetHeight;
this.setState({
width:width,
height:height
})
};

/**
* 渲染虚拟dom
* @return void
*/
render(){
return (
<div>
<p>
当前计数：{this.state.currentCount}
</p>
<p>
当前文档body高度：{this.state.height}
</p>
<p>
当前文档body宽度：{this.state.width}
</p>
</div>
)
}
}