React組件生命周期小結

相關函數

簡單地說,React Component通過其定義的幾個函數來控制組件在生命周期的各個階段的動作。
在ES6中,一個React組件是用一個class來表示的(具體可以參考官方文檔),如下:

// 定義一個TodoList的React組件,通過繼承React.Component來實現
class TodoList extends React.Component {
  ...
}

生命周期相關的函數有:

constructor(props, context)

構造函數,在創建組件的時候調用一次。

componentWillMount()

在組件掛載之前調用一次。如果在這個函數里面調用setState,本次的render函數可以看到更新后的state,并且只渲染一次。

componentDidMount()

在組件掛載之后調用一次。這個時候,子主鍵也都掛載好了,可以在這里使用refs。

componentWillReceiveProps(nextProps)

props是父組件傳遞給子組件的。父組件發生render的時候子組件就會調用componentWillReceiveProps(不管props有沒有更新,也不管父子組件之間有沒有數據交換)。

shouldComponentUpdate(nextProps, nextState)

組件掛載之后,每次調用setState后都會調用shouldComponentUpdate判斷是否需要重新渲染組件。默認返回true,需要重新render。在比較復雜的應用里,有一些數據的改變并不影響界面展示,可以在這里做判斷,優化渲染效率。

componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者調用forceUpdate之后,componentWillUpdate會被調用。

componentDidUpdate()

除了首次render之后調用componentDidMount,其它render結束之后都是調用componentDidUpdate。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以對應起來。區別在于,前者只有在掛載的時候會被調用;而后者在以后的每次更新渲染之后都會被調用。

ReactElement render()

render是一個React組件所必不可少的核心函數(上面的其它函數都不是必須的)。記住,不要在render里面修改state。

componentWillUnmount()

組件被卸載的時候調用。一般在componentDidMount里面注冊的事件需要在這里刪除。

更新方式

在react中,觸發render的有4條路徑。

以下假設shouldComponentUpdate都是按照默認返回true的方式。

首次渲染Initial Render
調用this.setState (并不是一次setState會觸發一次render,React可能會合并操作,再一次性進行render)
父組件發生更新(一般就是props發生改變,但是就算props沒有改變或者父子組件之間沒有數據交換也會觸發render)
調用this.forceUpdate
下面是我對React組件四條更新路徑地總結:

http://upload-images.jianshu.io/upload_images/1814354-4bf62e54553a32b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

注意,如果在shouldComponentUpdate里面返回false可以提前退出更新路徑。

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

推薦閱讀更多精彩內容

  • 下面所寫的,只適合前端的React。(React也支持后端渲染,而且和前端有點小區別,不過我沒用過。) 相關函數 ...
    linjinhe閱讀 177,111評論 28 208
  • 在React Native中使用組件來封裝界面模塊時,整個界面就是一個大的組件,開發過程就是不斷優化和拆分界面組件...
    ITxiansheng閱讀 947評論 1 2
  • 原教程內容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,860評論 1 18
  • 在React Native中使用組件來封裝界面模塊時,整個界面就是一個大的組件,開發過程就是不斷優化和拆分界面組件...
    朱_源浩閱讀 8,986評論 6 38
  • 近日最慘烈的事 莫過于 搬180多斤的快遞上7樓 快遞箱高約1米5寬40公分 單是從快遞檔口拿出快遞 經已感到吃力...
    盧一定閱讀 349評論 0 0