在一個組件的整個生命周期中，通過用戶的交互來更新state或者props，重新渲染組件，更新頁面的ui。組成一個簡單的“狀態機”。
react的生命周期三個階段：
Mounting 掛載
1、 constructor()構造方法
constructor是ES6對類的默認方法，通過 new命令生成對象實例時自動調用該方法。初始化執行一次。使用constructor必須手動調用super方法。需要調用this.props必須傳入props。
在 super() 被調用之前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的原因則是便於(在子類中)能在 constructor 訪問 this.props。
class ClassName extends React.Component {
constructor(props) {
super(props); // 必須調用super方法
console.log(this.props); // 這里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
this.state = { color: props.color }; // !這種操作是錯誤的，應該避免
this.handleClick = this.handleClick.bind(this); // 將事件處理方法綁定到實例。
}
state = {}; // 也可以直接初始化state
}
通過集成extends React.Component 給組件初始化不會執行getDefaultProps、getInitialState
2、 componentWillMount => UNSAFE_componentWillMount()（即將被廢棄）
首次渲染（render）之前調用，只執行一次。調用setState方法，是渲染之前最后更改state的最后機會。
3、static getDerivedStateFromProps(props, state)(新)
該生命周期在組件實例化以及接收新props后調用。它可以返回一個對象來更新state，或者返回null來表示新的props不需要任何state更新。這個新的生命周期可覆蓋componentWillReceiveProps的所有用例。
更新后，setState也會調用該方法。
4、render組件渲染
該方法會創建一個虛擬DOM，用來表示組件的輸出。對於一個組件來講，render方法是唯一一個必需的方法。state或者props的更新或者componentShouldUpdate返回true都會引起render的重渲染，會多次執行。
該方法只能返回一個頂級組件，或者返回false/null；在這里也不能修改組件的狀態，即不可調用setState方法。
render方法返回的結果並不是真正的DOM元素，而是一個虛擬的表現，類似於一個DOM tree的結構的對象。react之所以效率高，就是這個原因。
5、componentDidMount
組件渲染完成后調用該方法，只執行一次。在這里已經渲染出真實的dom節點了，可以再該方法中通過 this.getDOMNode() (新版本已被棄用，推薦使用ReactDOM.findDOMNode)訪問到真實的 DOM。
該方法中也可以調用setState來更新狀態重新渲染組件，這里也是設置定時器監聽事件的好地方。
上面說過組件並不是真實的dom節點，如果需要從組件獲取真實 DOM 的節點，可以通過ref屬性。
class ClassName extends React.Component {
constructor(props) {
super(props); // 必須調用super方法
console.log(this.props); // 這里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
}
componentDidMount() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 返回<div>渲染</div>
}
render() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 這里首次渲染拿不到值，返回null
return <div ref=“title”>渲染</div>
}
}
Updating 更新
1、componentWillReceiveProps(nextProps) => UNSAFE_componentWillReceiveProps(nextProps)（即將被廢棄）
組件props發生改變會調用該方法(或者說只要父組件更新，不管props是否與以前相同，都會調用該方法), 接收一個參數nextProps,所以在這里可以繼續拿到this.props的值。在這個方法中更新state是安全的，一般情況下為了避免任何props的改變多次觸發state更新，
可以通過nextProps和this.props的比較后再做相關操作。
2、static getDerivedStateFromProps(props, state)(新)
3、 shouldComponentUpdate(nextProps, nextState)
通過返回true或者false來判斷是否需要重新渲染組件。如果返回false，后面的ender 以及 componentWillUpdate，componentDidUpdate 方法都將不會執行。組件比較多時，使用該方法能夠避免不需要的重渲染，優化性能。
class ClassName extends React.Component {
constructor(props) {
super(props); // 必須調用super方法
console.log(this.props); // 這里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
}
componentDidMount() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 返回<div>渲染</div>
}
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id; // 只有在id改變時才會重新渲染組件
}
render() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 這里首次渲染拿不到值，返回null
return <div ref=“title”>渲染</div>
}
}
4、 componentWillUpdate(nextProps, nextState) => UNSAFE_componentWillUpdate(nextProps, nextState)（即將被廢棄）
類似於componentWillMount，組件首次渲染后，如果再次收到state/props改變或者shouldComponentUpdate返回true,會調用該方法。在這里不能使用this.setState來修改狀態。這個函數調用之后，就會把nextProps和nextState分別設置到this.props和this.state中。
5、render組件渲染
同上
6、getSnapshotBeforeUpdate(nextProps, nextState)(新)
render的輸出結果渲染到dom之前調用。它的任何返回值都會作為參數傳給componentDidUpdate。這個新的生命周期可覆蓋componentWillUpdate的所有用例。
7、 componentDidUpdate(nextProps, nextState, snapshot)
類似於componentDidMount，在組件重新被渲染之后調用。可以在這里訪問並修改 DOM。當使用getSnapshotBeforeUpdate返回值時，snapshot參數才會有值。
Unmounting 卸載
componentWillUnmount
該方法將會在 component 從DOM中移除時調用。一些組件相關的清理工作都可以在這里處理。
Error Handling 錯誤處理
1、static getDerivedStateFromError(error)
子組件拋出錯誤后調用該組件。他接收拋出的錯誤信息作為參數。
2、componentDidCatch(error, info)
注：新版本中加入的生命周期不可和即將被廢棄的混用。
總結
Mounting
1、constructor
2、componentWillMount() => UNSAFE_componentWillMount()（即將被廢棄）
3、static getDerivedStateFromProps(props, state)(新)
4、render
5、componentDidMount
Updating
1、componentWillReceiveProps() => UNSAFE_componentWillReceiveProps(nextProps)（即將被廢棄）
2、static getDerivedStateFromProps(props, state)(新)
3、shouldComponentUpdate(nextProps, nextState)
4、componentWillUpdate() => UNSAFE_componentWillUpdate(nextProps, nextState)（即將被廢棄）
5、render()
6、getSnapshotBeforeUpdate(nextProps, nextState)(新)
7、componentDidUpdate(nextProps, nextState, snapshot)
Unmounting
componentWillUnmount()
Error Handling
1、static getDerivedStateFromError(error)
2、componentDidCatch(error, info)