備注：以下代碼只是解釋， 不能運行， 參考 組件的生命周期 ，和阮一峰老師的 demo 。然后個人總結的.如有錯誤，歡迎指出！
/**
* 組件的聲明周期 方法，詳解，依次調用順序如下:
* @type {*|Function}
*/
var MyComponent = React.createClass({
/**
* 1.該方法在初始化時，只會被調用一次(并且是最先被調用)，
* 作用： 用于設置 組件的 props 的默認屬性， 也可以在掛載的時候，
* 設置props var data=['1','2']; <MyComponents value={data} />
*
* 盡可能的不要調用 setProps()，props 相當于const
* @returns {{}}
*/
getDefaultProps: function () {
console.log('getDefaultProps');
return {};
},
/**
* 2.該方法個 getDefaultProps 有些類型， 有且只調用一次，在 getDefaultProps 之后執行
* 作用：用來初始化每個 實例的state，在這個組件的方法里，可以訪問組件的 props. 每一個 React的組件,都有自己的state
*
* 和props的區別: state 只存在于組件的內部，而props 在所有實例中共享
*
* 細節： 每次修改state，都會重新渲染組件，依次調用下列方法：
* shouldComponentUpdate
* componentWilUpdate
* render
* componentDidUpdate
*
* 但是不要直接修改 this.state 。而要用 setState()方法來修改
* @returns {{}}
*/
getInitialState: function () {
console.log('getInitialState');
return {};
},
/**
* 3.該方法在首次渲染之前調用【在 getInitialState之后調用】， 也是再 render 方法調用之前修改 state 的最后一次機會。
*
*/
componentWillMount: function () {
console.log('componentWillMount');
},
/**
* 4.該方法會返回一個 virtual DOM（虛擬DOM，并非真實DOM節點）。對于一個組件來說，render方法是唯一必須的方法。 render 方法需要滿足以下幾點：
* 1.每個組件都必須要有render方法
* 2.可以返回 null、false 或 任意React組件
* 3.只能有一個頂級父組件
* 4.只能通過 this.props 和 this.state 來訪問數據【不能修改,即不能調用：this.setStats() 或 this.setProps() 】
* 5.不能修改 DOM的輸出
* @returns {XML}
*/
render: function () {
console.log('render');
return <div></div>;
},
/**
*5.該方法不會在服務端被渲染的過程中調用。該方法被調用時，已經渲染出真實的DOM，可以在方法中通過this.getDOMNode()來訪問到真實的DOM。
* 推薦使用 React.findDOMNode();
*/
componentDidMount: function () {
console.log('componentDidMount');
},
/*=================以下方法是組件創建成功后的存在期交互方法，如：(click,change等)============================================*/
/**
依次調用順序為：
1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate
*/
/**
* 1.
* 不知道對不對，暫時這么理解：
* 當 props 發生改變，componentWilReceiveProps 會被調用，該方法接受一個參數，即被改變的 props,
* 用于組件 props 變化之后，更新state
*/
componentWillReceiveProps: function (nextProps) {
if (nextProps.checked !== undefined) {
this.setState({
checked: nextProps.checked
})
}
},
/**
* 2.
* 作用: 改方法返回 布爾值， 用于判斷是否需要調用 render 和后面的 componentWilUpdate componentDidUpdate方法，
* 如何使用： 當我們確定 組件的 props 或者 state 的改變不需要重新渲染,即可以 重寫該方法，返回 false 即可
*/
shouldComponentUpdate: function (nextProps, nextState) {
return this.state.checked === nextState.checked;
//return false 則不更新組件
},
/**
* 3. 該方法 和 componentWillMount類似
* componentWillMound 和 componentWillUpdate 的區別：
* 相同點： 都在是 渲染組件之前調用。
* 不同點： componentWillMount 是在初始化調用，而componentWillUpdate 是在存在期間的 交互方法調用
*
* 注意事項： 不要在此方法再去更新props 或者 state
*/
componentWillUpdate: function (object_nextProps, object_netState) {
},
/**
* 該方法和 componentDidMount 類似：
* 在組件被重新渲染之后調用，
* 作用： 可以在這里訪問，并修改 DOM
*/
componentDidUpdate: function (object_prevProps, object_prevState) {
},
/**
* 該方法在 組件被銷毀時調用.
*
* 作用：在componentDidMount添加的任務都需要在該方法中撤銷。 比如創建的定時器 或者 事件監聽器
*
* 當再次裝載組件時，以下方法會被依次調用：
*
* 1、getInitialState
* 2、componentWillMount
* 3、render
* 4、componentDidMount
*/
componentWillUnmount: function () {
},
// 有時候需要從組件中獲取真實的 DOM節點， 就需要使用 ref屬性
var Area = React.createClass({
render: function(){
this.getDOMNode(); //render調用時，組件未掛載，這里將報錯
return <canvas ref='mainCanvas'>
},
componentDidMount: function(){
var canvas = this.refs.mainCanvas.getDOMNode();
//這是有效的，可以訪問到 Canvas 節點
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
);