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

react的定时器的调用必须采用组件生命周期函数去调用：

有关组件的生命周期，见菜鸟教程：

http://www.runoob.com/react/react-component-life-cycle.html

 

学习资料：菜鸟教程；

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函数中
  
  
  在挂载结束后的生命周期函数
  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(
  	      
  
  	      		hello，你好！{this.state.num}
  	      		
  	      
  
  	    )
  	  }
  }

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

• 直接上代码

  // 创建组件
  var timer = null;
  class Index extends React.Component{
  	constructor(){
  		super();//必须调用；
  		this.state={
  			a:100
  		}
  	}
  	
  
  	 setTimeValue(cal) {
      //时间接口
      let second = cal.split(':')[2];
      let miu = cal.split(':')[1];
      let hour = cal.split(':')[0];
      second--;
      if (second < 10) {
        second = '0' + second;
      }
      if (second < 0 || second == '0-1') {
        second = 59;
        miu -= 1;
        if (miu < 10) {
          miu = '0' + miu;
        }
      }
      if (miu < 0 || miu == '0-1') {
        miu = 59;
        hour -= 1;
        if (hour < 10) {
          hour = '0' + hour;
        }
      }
      if (hour <= 0) {
        if (miu <= 0) {
          if (second <= 0) {
            this.refs.timeP.style = 'color:red';
            clearInterval(this.timer);
           
          }
        }
      }
      return hour + ':' + miu + ':' + second == '00:00:00'
        ? '已超时'
        : 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(
        
  
             
  23:48:50
        
      )
    }
  }