React多重組件詳細生命週期

目標

React中內部組件生命週期的運行方式。

生命週期

類調用:
此過程僅在類建立時被一次，即不管建立多少個ReactElement，此過程均只會執行一次

• getDefaultProps

實例化:
此過程僅執行一次，執行完畢後，React組件真正被渲染到DOM中
期間執行生命週期函數以下：

• getInitialState

• componentWillMount

• render

• componentDidMount

變動

此過程會在this.state或this.props變動時執行
期間執行生命週期函數以下：

this.state變動

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

this.props變動

• componentWillReceiveProps

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

卸載
此過程在組件銷燬前調用一次期間執行生命週期函數以下：

• componentWillUnmount

整個生命週期所涉及的方法如圖所示：

測試多組件生命週期轉換

實例

<Super>
    <Sub_1 />
    <Sub_2 />
</Super>

頁面加載後：

更新期

卸載期

原文來自：http://www.cnblogs.com/hhhyaa...