元件的生命週期可分成三個狀態：

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

生命週期的方法有：

componentWillMount 

在渲染前呼叫,在客戶端也在服務端。一般用的比較少，更多的是用在服務端渲染

1、元件剛經歷constructor,初始完資料 2、元件還未進入render，元件還未渲染完成，dom還未渲染

componentDidMount 

在第一次渲染後呼叫，只在客戶端。之後元件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中呼叫setTimeout, setInterval或者傳送AJAX請求等操作(防止非同步操作阻塞UI)。

元件第一次渲染完成，此時dom節點已經生成，可以在這裡呼叫ajax請求，返回資料setState後元件會重新渲染

componentWillReceiveProps 

在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。

shouldComponentUpdate 

返回一個布林值。在元件接收到新的props或者state時被呼叫。在初始化時或者使用forceUpdate時不被呼叫。  可以在你確認不需要更新元件時使用。

componentWillUpdate

在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫。

componentDidUpdate

 在元件完成更新後立即呼叫。在初始化時不會被呼叫。

componentWillUnmount

在元件從 DOM 中移除之前立刻被呼叫。

class Demo extends Component {
  	constructor(props, context) {
      	    //如果想(在元件其他地方是可以直接接收的)使用props或context，則需要以引數形式傳入。
      	    //只要元件存在constructor,就必要要寫super,否則this指向會錯誤
      	    super(props, context);
      	    this.state = {
          	    data: 1
      	    };
  	},
	componentWillMount () {
		// 在元件掛載之前呼叫，且全域性只調用一次。如果在這個鉤子裡可以setState，render後可以看到更新後的state，不會觸發重複渲染。
		// 該生命週期可以發起非同步請求，並setState。（React v16.3後廢棄該生命週期，可以在constructor中完成設定state）
		// 不推薦在這裡發起ajax請求，若返回資料為空，則容易造成介面空白，影響渲染效果
	},
	componentDidMount () {
		//元件第一次渲染完成，此時dom節點已經生成，可以在這裡呼叫ajax請求，返回資料setState後元件會重新渲染
	},
	componentWillReceiveProps (nextProps) {
		// 在接受父元件改變後的props需要重新渲染元件時用到的比較多
		// 通過對比nextProps和this.props，將nextProps setState為當前元件的state，從而重新渲染元件
		nextProps.data !== this.props.data && this.setState({
	        data: nextProps.data
		    }，() => {
		      console.log("new data...");
	  	});

	},
	shouldComponentUpdate (nextProps, nextState) {
		// react效能優化非常重要的一環。
		// 元件接受新的state或者props時呼叫，我們可以設定在此對比前後兩個props和state是否相同，
		// 如果相同則返回false阻止更新，因為相同的屬性狀態一定會生成相同的dom樹，
		// 這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比，節省大量效能，尤其是在dom結構複雜的時候。
	},
	componentWillUpdate (nextProps, nextState) {
		// 元件初始化時不呼叫，只有在元件發生更新需要重新渲染時才呼叫
	},
	componentDidUpdate (prevProps, prevState) {
		// 元件初始化時不呼叫，元件更新渲染完成後呼叫，此時dom節點載入完成，可以獲取到dom節點。
		// react只會在第一次初始化成功會進入componentDidmount，
		// 之後每次重新渲染後都會進入這個生命週期，這裡可以拿到prevProps和prevState，即更新前的props和state。
		// 該鉤子內setState有可能會觸發重複渲染，需要謹慎判斷，否則會進入死迴圈 
	},
	render () {
	    return (
	        <div>This is Demo！</div>
	    );
	},
	componentWillUnmount () {
		// 元件將要解除安裝時呼叫，一些事件監聽和定時器需要在此時清除。
	},
	componentDidCatch (error, info) {
    	//React 16 中引入，用來 捕獲元件的錯誤。
    	//如果 render() 函式丟擲錯誤，則會觸發該函式。
    	//錯誤在渲染階段中被捕獲，但在事件處理程式中不會被捕獲。
    }
}