ReactJS組件的生命周期

  1. 創建階段：在ReactDom.render()啟動之前被調用

    getDefaultProps：獲取默認的屬性值，處理props的默認值，在React.createClass調用。

  2. 實例化階段：

    在ReactDom.render()啟動之后，會調用下面一系列方法

    1. getInitialState：初始化組件的state值，其返回值會賦給組件的this.state屬性
    2. componentWillMount：該方法在render方法之前調用，業務邏輯放在這里去處理
    3. render：根據state值，渲染并返回一個虛擬的DOM
    4. componentDidMount：該方法在render方法之后調用，在該方法中，ReactJS會使用render方法返回的虛擬DOM對象來創建真實的DOM結構，組件內部可以通過this.getDOMNode()來獲取當前組件的節點
    • state：組建的屬性，主要用來存儲組件自身需要的數據，每次數據更新都是通過修改state屬性的值，ReactJS內部會監聽state屬性的變化，一旦發生變化，就會主動觸發組件的render方法來更新虛擬DOM的結構
    • 虛擬DOM：將真實的DOM結構映射城一個Json數據結構
  3. 更新階段：主要發生在用戶操作之后或父組件有更新的時候，此時會根據用戶的操作行為進行相應的頁面的調整
    1. componentWillReceiveProps：該方法發生在this.props被修改或父組件調用setProps()方法之后

    調用this.setSate方法來完成對state的修改

    1. shouldComponentUpdate：用來攔截新的props或state，根據邏輯來判斷是否需要更新

    返回值為true，需要跟新；false，則不需更新

    1. componentWillUpdate：shouldComponentUpdate返回true的時候執行
    2. render：渲染組件，進行更新

    注意：這里的render并不是將所有的組件都進行更新，而是根據底層的diff算法，生成需要更新的虛擬DOM數據。在該方法中最好不要對state進行修改

    1. componentDidUpdate：組件更新完畢
  4. 銷毀階段：

    componentWillUnmount：銷毀時被調用，通常做一些取消事件的綁定、移除虛擬DOM中對應的數據結構、銷毀一些無用的定時器等工作

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容