react的定時器的呼叫必須採用元件生命週期函式去呼叫：

有關元件的生命週期，見菜鳥教程：

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

學習資料：菜鳥教程；

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>
      )
    }
  }