本文主要和大家分享react组件生命周期，react组件的生命周期有一堆的相关函数，其实就是一推的钩子函数。在react组件创建的各个阶段触发特定的钩子函数。希望能帮助到大家。
可以先大概看一下下面这张图：
constructor构造函数，在创建组件的时候调用一次。
constructor(props, context)
componentwillmount在组件挂载之前调用一次。如果在这个函数里面调用setstate，render()知道state发生变化，并且只渲染一次。
void componentwillmount()
renderrender是一个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
)
componentwillupdateshouldcomponentupdate返回true之后，componentwillupdate会被调用。需要特别注意的是，在这个函数里面，不要用this.setstate来修改状态。不然这个函数会无限循环执行。这个函数调用之后，就会把nextprops和nextstate分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了。
void componentwillupdate(
object nextprops, object nextstate
)
componentdidupdate除了首次render之后调用componentdidmount，其它render结束之后都是调用componentdidupdate。
void componentdidupdate()
componentwillreceivepropsprops是父组件传递给子组件的。父组件发生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组件生命周期实例分析的详细内容。