理解React組件生命週期

簡介

在使用React建立組件的過程當中，會調用一個render方法，以及觸發若干生命週期的方法。

接下來，這篇文章會講一講這些生命週期的方法是什麼時候被執行的。

理解組件的生命週期，當組件被建立或銷燬時，能夠執行某些操做。此外，當 props 和 state 發生改變的時候，你能夠利用這些生命週期的鉤子來改變你的組件。

生命週期

爲了清楚的瞭解生命週期，咱們須要明白 組件初始化 ，state 改變 ， props 改變 ， 組件卸載 ，以及調用 forceUpdate() 時，哪些鉤子函數會被執行。

組件初始化

constructor()

React組件的構造函數將會在裝配以前被調用。當爲一個React.Component子類定義構造函數時，你應該在任何其餘的表達式以前調用super(props)。不然，this.props在構造函數中將是未定義。

構造函數是初始化狀態的合適位置。若你不初始化狀態且不綁定方法，那你也不須要爲你的React組件定義一個構造函數。

能夠基於屬性來初始化狀態。這樣有效地「分離（forks）」屬性並根據初始屬性設置狀態。這有一個有效的React.Component子類構造函數的例子：

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

componentWillMount()

componentWillMount()

componentWillMount()在裝配發生前被馬上調用。其在render()以前被調用，所以在這方法裏同步地設置狀態將不會觸發重渲。避免在該方法中引入任何的反作用或訂閱。

這是惟一的會在服務端渲染調起的生命週期鉤子函數。一般地，咱們推薦使用constructor()來替代。

render()

render()方法是必須的。

當被調用時，其應該檢查this.props 和 this.state並返回如下類型中的一個:

• React元素。 一般是由 JSX 建立。該元素多是一個原生DOM組件的表示，如<div />，或者是一個你定義的合成組件。
• 字符串和數字。 這些將被渲染爲 DOM 中的 text node。
• Portals。 由 ReactDOM.createPortal 建立。
• null。 什麼都不渲染。
• 布爾值。 什麼都不渲染。（一般存在於 return test && <Child />寫法，其中 test 是布爾值。）

當返回null 或 false時，ReactDOM.findDOMNode(this) 將返回 null。
render()函數應該純淨，意味着其不該該改變組件的狀態，其每次調用都應返回相同的結果，同時不直接和瀏覽器交互。若須要和瀏覽器交互，將任務放在componentDidMount()階段或其餘的生命週期方法。保持render() 方法純淨使得組件更容易思考。

注意
若 shouldComponentUpdate() 返回 false， render()函數將不會被調用。

componentDidMount()

componentDidMount()

componentDidMount()在組件被裝配後當即調用。初始化使得DOM節點應該進行到這裏。若你須要從遠端加載數據，這是一個適合實現網絡請求的地方。在該方法裏設置狀態將會觸發重渲。

State Changes

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

使用shouldComponentUpdate()以讓React知道當前狀態或屬性的改變是否不影響組件的輸出。默認行爲是在每一次狀態的改變重渲，在大部分狀況下你應該依賴於默認行爲。

當接收到新屬性或狀態時，shouldComponentUpdate()在渲染前被調用。默認爲true。該方法並不會在初始化渲染或當使用forceUpdate()時被調用。

當他們狀態改變時，返回false 並不能阻止子組件重渲。

注意：若是隻定義方法，不寫任何返回值，會提示： shouldComponentUpdate(): Returned undefined instead of a boolean value.

注意即便屬性未有任何改變，React可能也會調用該方法，所以若你想要處理改變，請確保比較當前和以後的值。這可能會發生在當父組件引發你的組件重渲。

在裝配期間，React並不會調用帶有初始屬性的componentWillReceiveProps方法。其僅會調用該方法若是某些組件的屬性可能更新。調用this.setState一般不會觸發componentWillReceiveProps。

componentWillUpdate()

componentWillUpdate(nextProps, nextState)

當接收到新屬性或狀態時，componentWillUpdate()爲在渲染前被當即調用。在更新發生前，使用該方法是一次準備機會。該方法不會在初始化渲染時調用。

注意你不能在這調用this.setState()，若你須要更新狀態響應屬性的調整，使用componentWillReceiveProps()代替。

注意：若shouldComponentUpdate()返回false，componentWillUpdate()將不會被調用。

componentDidUpdate()

componentDidUpdate(nextProps, nextState)

當接收到新屬性或狀態時，componentWillUpdate()爲在渲染前被當即調用。在更新發生前，使用該方法是一次準備機會。該方法不會在初始化渲染時調用。

注意：你不能在這調用 this.setState()，若你須要更新狀態響應屬性的調整，使用 componentWillReceiveProps()代替。

注意：若shouldComponentUpdate()返回false，componentWillUpdate()將不會被調用。

Props Changes

componentWillReceiveProps()

componentWillReceiveProps(nextProps)

componentWillReceiveProps()在裝配了的組件接收到新屬性前調用。若你須要更新狀態響應屬性改變（例如，重置它），你可能需對比this.props和nextProps並在該方法中使用this.setState()處理狀態改變。

注意：即便屬性未有任何改變， React可能也會調用該方法，所以若你想要處理改變，請確保比較當前和以後的值。這可能會發生在當父組件引發你的組件重渲。

在裝配期間，React並不會調用帶有初始屬性的componentWillReceiveProps方法。其僅會調用該方法若是某些組件的屬性可能更新。調用this.setState一般不會觸發componentWillReceiveProps。

Unmounting

componentWillUnmount()

componentWillUnmount()

componentWillUnmount() 在組件被卸載和銷燬以前馬上調用。能夠在該方法裏處理任何須要的清理工做，例如解綁定時器，取消網絡請求，清理任何在componentDidMount環節建立的DOM元素。

forceUpdate

默認狀況，當你的組件或狀態發生改變，你的組件將會重渲。若你的render()方法依賴其餘數據，你能夠經過調用forceUpdate()來告訴React組件須要重渲。

調用forceUpdate()將會致使組件的 render()方法被調用，並忽略shouldComponentUpdate()。這將會觸發每個子組件的生命週期方法，涵蓋，每一個子組件的shouldComponentUpdate() 方法。若當標籤改變，React僅會更新DOM。

一般你應該嘗試避免全部forceUpdate() 的用法並僅在render()函數裏從this.props和this.state讀取數據。

forceUpdate() Example

// forceUpdate() Example

class App extends React.Component{
  constructor(){
    super();
    this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  };

  componentWillUpdate() {
    console.info('componentWillUpdate called');
  }

  componentDidUpdate() {
    console.info('componentDidUpdate called');
  }

  forceUpdateHandler(){
    this.forceUpdate();
  };

  render(){
    return(
      <div>
        <button onClick= {this.forceUpdateHandler} >FORCE UPDATE</button>
        <h4>Random Number : { Math.random() }</h4>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

原文連接

參考資源

react component lifecycle：https://busypeoples.github.io...

react 官方文檔：https://doc.react-china.org/d...

forceUpdate() Example：https://codepen.io/SyedAfrozP...