学习资料：菜鸟教程；

react官方文档；

React 入门实例教程 - 阮一峰的网络日志；

React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。

组件的生命周期可分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

生命周期的方法有：

componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后
即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
组件被调用时，反应了组件的被调用渲染的的各个状态，及相对应的函数；
组件被调用之前，先走构造函数；

//挂载前；
	componentWillMount(){
		console.log('挂载前，上树前')
	}
	//挂载结束后，马上调用；可以操作dom元素；
	componentDidMount(){
		console.log('挂载后')
	}

在此处操作dom元素，可以通过dom钩子----ref进行造作dom元素；

如何使用且看下面的代码：

render函数中
<input type='button' ref='input'  value='更新' name='button'/>

在挂载结束后的生命周期函数
componentDidMount(){
		console.log('挂载后')
		console.log(this.refs.input);
	}

结果输出：

一个完成的生命周期包括组件产生调用，更新重新渲染到组件销毁；

	this.state={
			num:1
		}

	}
	//挂载前；
	componentWillMount(){
		console.log('挂载前，上树前')
	}
	//挂载结束后，马上调用；可以操作dom元素；
	componentDidMount(){
		console.log('挂载后')
		//console.log(this.refs.input);
	}
	//组件接收props数据被调用；
	componentWillReceiveProps(){
		console.log('接收props数据被调用');
	}
	//当组件做出是否更新dom时调用；
	shouldComponentUpdate(nextProps,nextState){
		console.log(nextProps);
		console.log(nextState);
		console.log('即将更新');
		return true;
	}
	//在组件更新发生之前被调用；
	componentWillUpdate(){
		console.log('组件更新之前被调用');
	}
	//组件更新被调用；
	componentDidUpdate(){
		console.log('组件更新被调用');
	}
	//组件销毁被调用；
	componentWillUnmount(){
		console.log('组件销毁被调用');
	}
	add(){
		this.setState({
			num:Math.random()
		})
	}
	render(){
	    return(
	      <div data-a='jon' className="hello">
	      		hello，你好！{this.state.num}
	      		<input type='button' ref='input' onClick={this.add.bind(this)} value='更新' name='button'/>
	      </div>

	    )
	  }
}

在组件是否更新dom时调用中，可以完成数据的处理，对接收的props数据和自身内部的state数据的应用和处理，这也是生命周期的一个特色，从开始到死亡的一个完美的过程；
还有组件销毁生命周期函数，一般会在组件挂载结束之前调用，本人个人理解是组件销毁是需要通过在父级进行销毁，自己移除自己不太现实；
shouldComponentUpdate（）函数中是否更新数据中，必须有一个返回值，return true or false；
以上是本人对全部生命周期的一个理解；
下面的计时器是对生命周期的一个很好的运用；

直接上代码

// 创建组件
var timer = null;
class Index extends React.Component{
	constructor(){
		super();//必须调用；
		this.state={
			a:100
		}
	}
	

	time(cal){
		//时间接口
		var second = cal.split(':')[2];
	  	var miu = cal.split(':')[1];
	  	var hour = cal.split(':')[0];
	  	second--;
	  	if(second<10){
  			second='0'+second
  		}
  		if(second<=0){
  			second=60;
  			miu -=1;
  			if(miu<10){
  				miu='0'+miu
  			}
  			
  		}
  		else if(miu<=0){
  			miu = 60;
  			hour -=1;
  			if(hour<10){
  				hour = '0'+hour
  			}
  		}
  		else if(hour<=0){
  			
  			hour = '00';
  			if(miu<=0){
  				miu='00';
  				if(second<=0){
  					second='00';
  					clearInterval(timer);
  				}
  			}
  			
  		}
  		
  		return hour+':'+miu+':'+second
	}
	
componentDidMount(){
	timer = setInterval(function(){
       this.refs.timeP.innerHTML = this.time(this.refs.timeP.innerHTML)
  	}.bind(this),1000)
		
	}
componentWillUnmount(){
		clearInterval(timer);
	}
render(){
	
    return(
      <div>
           <p ref='timeP'>23:48:50</p>
      </div>
    )
  }
}

react生命周期API（3.0）及生命周期与定时器的用法；

学习资料：菜鸟教程；

React 入门实例教程 - 阮一峰的网络日志；

React 组件生命周期

猜你喜欢