React中的生命周期和子組件
組件生命周期
為了說(shuō)明組件的創(chuàng)建,存在,銷(xiāo)毀的過(guò)程,react提供了組件的生命周期,共分三大周期:
- 創(chuàng)建期:說(shuō)明組件的創(chuàng)建的過(guò)程,相當(dāng)于人的少年
- 存在期:說(shuō)明組件的存在的過(guò)程,相當(dāng)于人的中年
- 銷(xiāo)毀期:說(shuō)明組件的銷(xiāo)毀的過(guò)程,相當(dāng)于人的老年
創(chuàng)建創(chuàng)建期
創(chuàng)建期共分五個(gè)階段:
- ES5開(kāi)發(fā)中,對(duì)應(yīng)五個(gè)方法:getDefaultProps,getInitialsate, ?
?componentWillMount?
?, ??render?
?, ??componentDidMount?
? - ES6開(kāi)發(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就沒(méi)有區(qū)別了
我們?yōu)閠his.state賦值,機(jī)可以初始化,
在構(gòu)造函數(shù)中,我們可以訪問(wèn)屬性數(shù)據(jù),因此可以用屬性數(shù)據(jù)為狀態(tài)數(shù)據(jù)賦值
這樣就實(shí)現(xiàn)了數(shù)據(jù)有外部流入內(nèi)部
第三個(gè)階段 組件即將被構(gòu)建
通過(guò)componentWillMount方法定義
此時(shí)可以訪問(wèn)到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù),并且無(wú)法訪問(wèn)虛擬DOM
我們可以提前請(qǐng)求數(shù)據(jù),我們也可以為需要在虛擬DOM中使用的插件,初始化。
第四個(gè)階段 渲染組件
我們通過(guò)render方法定義
返回值是渲染的虛擬DOM
此時(shí)可以訪問(wèn)到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù),無(wú)法訪問(wèn)虛擬DOM
所以我們?cè)阡秩咎摂MDOM的時(shí)候,可以用屬性數(shù)據(jù)或者狀態(tài)為虛擬DOM賦值
第五個(gè)階段 組件構(gòu)建完成
我們通過(guò)componentDidMount方法定義
此時(shí)可以訪問(wèn)到屬性數(shù)據(jù)以及狀態(tài)數(shù)據(jù),也可以訪問(wèn)虛擬DOM
因此我們可以在這個(gè)階段,發(fā)送請(qǐng)求,綁定事件等實(shí)現(xiàn)一些交互
該階段方法執(zhí)行完畢,標(biāo)志著組件創(chuàng)建期的結(jié)束,存在期的開(kāi)始,
所以該方法在組件實(shí)例化對(duì)象的一生中,只執(zhí)行一次。
我們可以在這個(gè)階段修改狀態(tài)數(shù)據(jù),
一旦??屬性?
??或者??狀態(tài)?
?數(shù)據(jù)發(fā)生改變,組件將進(jìn)入存在期。
獲取虛擬DOM
在渲染庫(kù)(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)
子組件
虛擬DOM可以添加子虛擬DOM,組件是對(duì)虛擬DOM的封裝,因此他們的行為是一致的,組件也可以定義子組件
在??該組件?
?中定義的??組件?
?,我們稱之為??該組件?
?的??子組件?
?,??該組件?
?稱之為??父組件?
?
<Zss> <Demo /> </Zss>
Zss組件就是父組件,Demo組件就是子組件。
組件是完整獨(dú)立的,因此數(shù)據(jù)不會(huì)共享,想讓組件之間共享數(shù)據(jù),我們要實(shí)現(xiàn)組件間的通信。
到此這篇關(guān)于React中的生命周期和子組件的文章就介紹到這了,更多相關(guān)React 生命周期 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React+Spring實(shí)現(xiàn)跨域問(wèn)題的完美解決方法
這篇文章主要介紹了React+Spring實(shí)現(xiàn)跨域問(wèn)題的完美解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08React使用Mobx6.x共享狀態(tài)問(wèn)題
這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10React實(shí)現(xiàn)文件上傳和斷點(diǎn)續(xù)傳功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)文件上傳和斷點(diǎn)續(xù)傳功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02Electron整合React使用搭建開(kāi)發(fā)環(huán)境的步驟詳解
這篇文章主要介紹了Electron整合React使用搭建開(kāi)發(fā)環(huán)境,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2020-06-06React實(shí)現(xiàn)一個(gè)高度自適應(yīng)的虛擬列表
這篇文章主要介紹了React如何實(shí)現(xiàn)一個(gè)高度自適應(yīng)的虛擬列表,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下2021-04-04