React中的生命周期和子組件
組件生命周期
為瞭說明組件的創建，存在，銷毀的過程，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 生命周期 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！