標籤:
來自kiinlam github
執行個體化
首次執行個體化
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
執行個體化完成後的更新
- getInitialState
- componentWillMount
- render
- componentDidMount
存在期
組件已存在時的狀態改變
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
銷毀&清理期
說明
生命週期共提供了10個不同的API。
1.getDefaultProps
作用於組件類,只調用一次,返回對象用於設定預設的props
,對於引用值,會在執行個體中共用。
2.getInitialState
作用於組件的執行個體,在執行個體建立時調用一次,用於初始化每個執行個體的state
,此時可以訪問this.props
。
3.componentWillMount
在完成首次渲染之前調用,此時仍可以修改組件的state。
4.render
必選的方法,建立虛擬DOM,該方法具有特殊的規則:
- 只能通過
this.props
和this.state
訪問資料
- 可以返回
null
、false
或任何React組件
- 只能出現一個頂級組件(不能返回數組)
- 不能改變組件的狀態
- 不能修改DOM的輸出
5.componentDidMount
真實的DOM被渲染出來後調用,在該方法中可通過this.getDOMNode()
訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中,該方法不會被調用。
6.componentWillReceiveProps
組件接收到新的props
時調用,並將其作為參數nextProps
使用,此時可以更改組件props
及state
。
componentWillReceiveProps: function(nextProps) { if (nextProps.bool) { this.setState({ bool: true }); } }
7.shouldComponentUpdate
組件是否應當渲染新的props
或state
,返回false
表示跳過後續的生命週期方法,通常不需要使用以避免出現bug。在出現應用的瓶頸時,可通過該方法進行適當的最佳化。
在首次渲染期間或者調用了forceUpdate
方法後,該方法不會被調用
8.componentWillUpdate
接收到新的props
或者state
後,進行渲染之前調用,此時不允許更新props
或state
。
9.componentDidUpdate
完成渲染新的props
或者state
後調用,此時可以訪問到新的DOM元素。
10.componentWillUnmount
組件被移除之前被調用,可以用於做一些清理工作,在componentDidMount
方法中添加的所有任務都需要在該方法中撤銷,比如建立的定時器或添加的事件監聽器。
參考資料
- React:引領未來的使用者介面開發架構/寸志 範洪春 楊森 陳湧 譯 -- 電子工業出版社
- Component Specs and Lifecycle
react組件生命週期過程