React中的生命周期和子組件

更新時(shí)間：2022年08月28日 14:36:09 作者：公眾號(hào)_前端每日技巧???????

這篇文章主要介紹了React中的生命周期和子組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下

組件生命周期

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

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

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

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

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

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

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

組件尚未創(chuàng)建

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

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

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

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

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

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

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

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

通過componentWillMount方法定義

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

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

第四個(gè)階段渲染組件

我們通過render方法定義

返回值是渲染的虛擬DOM

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

所以我們?cè)阡秩咎摂MDOM的時(shí)候，可以用屬性數(shù)據(jù)或者狀態(tài)為虛擬DOM賦值

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

我們通過componentDidMount方法定義

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

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

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

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

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

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

獲取虛擬DOM

在渲染庫（react-dom）中,提供了findDOMNode的方法，可以獲取虛擬DOM對(duì)應(yīng)的真實(shí)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 默認(rèn)屬性數(shù)據(jù)
GoTop.defaultProps = {
text: '返回頂部'
}
// 渲染組件
render(<GoTop />, app)