React中的生命週期和子元件

2022-08-28 18:00:22

元件生命週期

為了說明元件的建立，存在，銷燬的過程，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元件就是子元件。

元件是完整獨立的，因此資料不會共用，想讓元件之間共用資料，我們要實現元件間的通訊。

到此這篇關於React中的生命週期和子元件的文章就介紹到這了,更多相關React 生命週期內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React中的生命週期和子元件

目錄

元件生命週期

建立建立期

獲取虛擬DOM

子元件

熱門文章