組件生命周期

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

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

創(chuàng)建創(chuàng)建期

創(chuàng)建期共分五個階段：

• ES5開發(fā)中，對應(yīng)五個方法：getDefaultProps,getInitialsate, ??componentWillMount??, ??render??, ??componentDidMount??
• ES6開發(fā)中，移除了前兩個方法：componentWillMount, render, componentDidMount

第一個階段 組件定義默認屬性數(shù)據(jù)

defaultProps靜態(tài)屬性中定義

組件尚未創(chuàng)建

第二個階段 組件初始化狀態(tài)數(shù)據(jù)

在構(gòu)造函數(shù)中定義constructor

一定要執(zhí)行super(props)，實現(xiàn)構(gòu)造函數(shù)繼承，并且要傳遞屬性數(shù)據(jù)參數(shù)

繼承之后，this.props與props就沒有區(qū)別了

我們?yōu)閠his.state賦值，機可以初始化，

在構(gòu)造函數(shù)中，我們可以訪問屬性數(shù)據(jù)，因此可以用屬性數(shù)據(jù)為狀態(tài)數(shù)據(jù)賦值

這樣就實現(xiàn)了數(shù)據(jù)有外部流入內(nèi)部

第三個階段 組件即將被構(gòu)建

通過componentWillMount方法定義

此時可以訪問到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù)，并且無法訪問虛擬DOM

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

第四個階段 渲染組件

我們通過render方法定義

返回值是渲染的虛擬DOM

此時可以訪問到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù)，無法訪問虛擬DOM

所以我們在渲染虛擬DOM的時候，可以用屬性數(shù)據(jù)或者狀態(tài)為虛擬DOM賦值

第五個階段 組件構(gòu)建完成

我們通過componentDidMount方法定義

此時可以訪問到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù)，也可以訪問虛擬DOM

因此我們可以在這個階段，發(fā)送請求，綁定事件等實現(xiàn)一些交互

該階段方法執(zhí)行完畢，標志著組件創(chuàng)建期的結(jié)束，存在期的開始，

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

我們可以在這個階段修改狀態(tài)數(shù)據(jù)，

一旦??屬性???或者??狀態(tài)??數(shù)據(jù)發(fā)生改變，組件將進入存在期。

獲取虛擬DOM

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

// 定義組件
class GoTop extends Component {
// 2 初始化狀態(tài)數(shù)據(jù)
constructor(props) {
super(props);
// 狀態(tài)
// 用屬性數(shù)據(jù)，為狀態(tài)數(shù)據(jù)初始化
this.state = {
text: props.text
}
console.log(222, 'constructor', this, arguments)
}
// 3 組件即將構(gòu)建
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 組件構(gòu)建完成
componentDidMount() {
console.log(555, 'componentDidMount', this, arguments, findDOMNode(this))
}
}
// 1 默認屬性數(shù)據(jù)
GoTop.defaultProps = {
text: '返回頂部'
}
// 渲染組件
render(<GoTop />, app)

子組件

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

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

<Zss>
<Demo />
</Zss>

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

組件是完整獨立的，因此數(shù)據(jù)不會共享，想讓組件之間共享數(shù)據(jù)，我們要實現(xiàn)組件間的通信。

到此這篇關(guān)于React中的生命周期和子組件的文章就介紹到這了,更多相關(guān)React 生命周期 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論