組件生命周期

為了說明組件的創建，存在，銷毀的過程，react提供了組件的生命周期，共分三大周期：

• 創建期：說明組件的創建的過程，相當于人的少年
• 存在期：說明組件的存在的過程，相當于人的中年
• 銷毀期：說明組件的銷毀的過程，相當于人的老年

創建創建期

創建期共分五個階段：

• ES5開發中，對應五個方法：getDefaultProps,getInitialsate, ??componentWillMount??, ??render??, ??componentDidMount??
• ES6開發中，移除了前兩個方法：componentWillMount, render, componentDidMount

第一個階段 組件定義默認屬性數據

defaultProps靜態屬性中定義

組件尚未創建

第二個階段 組件初始化狀態數據

在構造函數中定義constructor

一定要執行super(props)，實現構造函數繼承，并且要傳遞屬性數據參數

繼承之后，this.props與props就沒有區別了

我們為this.state賦值，機可以初始化，

在構造函數中，我們可以訪問屬性數據，因此可以用屬性數據為狀態數據賦值

這樣就實現了數據有外部流入內部

第三個階段 組件即將被構建

通過componentWillMount方法定義

此時可以訪問到屬性數據以及狀態數據，并且無法訪問虛擬DOM

我們可以提前請求數據，我們也可以為需要在虛擬DOM中使用的插件，初始化。

第四個階段 渲染組件

我們通過render方法定義

返回值是渲染的虛擬DOM

此時可以訪問到屬性數據以及狀態數據，無法訪問虛擬DOM

所以我們在渲染虛擬DOM的時候，可以用屬性數據或者狀態為虛擬DOM賦值

第五個階段 組件構建完成

我們通過componentDidMount方法定義

此時可以訪問到屬性數據以及狀態數據，也可以訪問虛擬DOM

因此我們可以在這個階段，發送請求，綁定事件等實現一些交互

該階段方法執行完畢，標志著組件創建期的結束，存在期的開始，

所以該方法在組件實例化對象的一生中，只執行一次。

我們可以在這個階段修改狀態數據，

一旦??屬性???或者??狀態??數據發生改變，組件將進入存在期。

獲取虛擬DOM

在渲染庫（react-dom）中,提供了findDOMNode的方法，可以獲取虛擬DOM對應的真實DOM元素。

// 定義組件
class GoTop extends Component {
// 2 初始化狀態數據
constructor(props) {
super(props);
// 狀態
// 用屬性數據，為狀態數據初始化
this.state = {
text: props.text
}
console.log(222, 'constructor', this, arguments)
}
// 3 組件即將構建
componentWillMount() {
console.log(333, 'componentWillMount', this, arguments, findDOMNode(this))
}
// 4 渲染虛擬DOM
render() {
console.log(444, 'render', this, arguments)
return <span>{this.state.text}</span>
}
// 5 組件構建完成
componentDidMount() {
console.log(555, 'componentDidMount', this, arguments, findDOMNode(this))
}
}
// 1 默認屬性數據
GoTop.defaultProps = {
text: '返回頂部'
}
// 渲染組件
render(<GoTop />, app)

子組件

虛擬DOM可以添加子虛擬DOM，組件是對虛擬DOM的封裝，因此他們的行為是一致的，組件也可以定義子組件

在??該組件??中定義的??組件??，我們稱之為??該組件??的??子組件??，??該組件??稱之為??父組件??

<Zss>
<Demo />
</Zss>

Zss組件就是父組件，Demo組件就是子組件。

組件是完整獨立的，因此數據不會共享，想讓組件之間共享數據，我們要實現組件間的通信。