React元件生命週期有三個階段：載入、更新和解除安裝。每個階段有多個方法來呼叫實現某些功能。這些方法名字也很有意思，帶will字首表示在該階段發生之前呼叫，did表示在該階段發生之後呼叫。本文將介紹這些方法。本文翻譯自React官網文件，如有翻譯不當，請不吝指正。
1. Mounting階段：該階段表示一個元件例項被建立並被插入到DOM中。該階段有四個方法：constructor()，componentWillMount()，render()和componentDidMount()。

• constructor(props)：該方法在元件載入前呼叫。當元件作為React.Component
  的子類實現時需要在其他宣告之前先呼叫super(props)。否則，this.props在構造器中會是undefined，這會導致程式碼出現bug。
  作用：用來初始化狀態，如果既不初始化狀態也不繫結方法，那就沒必要實現該方法了。（筆者注：事實上，如果元件沒有構造器方法的話，元件會預設呼叫一個構造器，實現屬性的傳遞）。
• componentWillMount()：該方法會在載入發生前呼叫。因為它發生在render()方法前，因此在該方法內同步設定狀態不會引發重渲染。該方法還是伺服器端渲染的唯一的生命週期鉤子。一般，推薦用constructor()代替該方法。
• render()：該方法必須要有。當呼叫時，它會檢查this.props
  和this.state，然後返回一個React元素。這個元素可以是原生DOM元件如div，也可以是一個自定義的複合元件。如果什麼也不想渲染的話，可以返回null或false。當返回null或false時，ReactDOM.findDOMNode(this)會返回null。該方法應該是純淨的，這意味著它不能修改元件狀態，每次呼叫會返回相同的結果，不會和瀏覽器發生直接的互動。如果想要同瀏覽器發生互動的話，應該在componentDidMount()中實現。
• componentDidMount()：元件載入完成後觸發。
  作用：放置必要的DOM節點。如果要從遠端節點載入資料，這是一個不錯的例項化網路請求的地方。也可以在此處設定定時器等。
  注意：在該方法內設定狀態會導致重渲染。

2. Updating階段：該階段表示由狀態或屬性的改變導致元件的重渲染。該階段有五個方法：componentWillReceiveProps()，shouldComponentUpdate()，componentWillUpdate()，render()和componentDidUpdate()。

• componentWillReceiveProps(nextProps)：該方法會在載入好的元件在收到新的狀態後呼叫。如果需要更新狀態以反映屬性的改變，可以在比較this.props和nextProps後，使用this.setState()方法來實現狀態的過渡。
  注意：React可能會在props值並未改變的時候呼叫該方法，所以要確保每次處理改變時都要比較當前props和收到的props值。這可能發生在父元件導致該元件重渲染時。
  非觸發時期：mounting階段不會呼叫該方法。只有在部分props屬性更新時呼叫該方法，另外呼叫this.state()不會觸發該方法。
• shouldComponentUpdate(nextProps, nextState)：該方法用來告訴React，元件輸出是否受到當前狀態或屬性的影響。預設情況下，每次狀態改變都會導致重渲染，在大多數情況下，你只需保持該預設行為即可。該方法在收到新的props或state時會被呼叫，且呼叫是在重渲染前。該方法預設返回true。但返回false不會影響其子元件在狀態改變時的重渲染。
  非觸發時期：初次渲染或使用forceUpdate()時不會呼叫該方法。
  注意：就目前而言，如果該方法返回false，以後的componentWillUpdate()，render()和componentDidUpdate()都不會再呼叫了。但未來可能該方法返回的結果只是作為暗示，而非指令，返回false可能仍會導致重新渲染。
  最後，如果找到了導致效能低下的元件，可以使它繼承React.PureComponent。該元件用props和state的淺比較實現了shouldComponentUpdate()。也可以自己實現該方法，通過this.props同nextProps比較，this.state同nextState比較，然後返回false以跳過更新。
• componentWillUpdate()：該方法在收到新屬性和狀態渲染前呼叫。可以用它來做更新前的準備工作。
  注意：該方法不可以呼叫this.setState()。如果需要更新狀態以響應屬性的改變，使用componentWillReceiveProps(nextProps)代替。
  非觸發時期：初次渲染不會呼叫該方法。shouldComponentUpdate()返回false不會呼叫該方法。
• render()：該方法是mount和update階段都會使用到的方法，解釋同mount階段的render()。
  非觸發時期：shouldComponentUpdate()返回false不會呼叫該方法。
• componentDidUpdate(prevProps, prevState)：更新發生後會立即呼叫該方法。可用來在元件更新後操作DOM。另外，也可以通過比較當前屬性和之前屬性來決定是否傳送網路請求（如，狀態未改變不需要做網路請求）。
  非觸發時期：初次渲染不會呼叫該方法。shouldComponentUpdate()返回false不會呼叫該方法。

3. Unmounting階段：該階段表示元件將從DOM中移除。該階段只有一個方法：componentWillUnmount()。

• componentWillUnmount()：該方法會在元件被銷燬前立即呼叫。
  作用：可以在方法內實現一些清理工作，如清除定時器，取消網路請求或者是清理其他在componentDidMount()方法內建立的DOM元素。