React中的生命周期和子組件
組件生命周期
為了說明組件的創(chuàng)建,存在,銷毀的過程,react提供了組件的生命周期,共分三大周期:
- 創(chuàng)建期:說明組件的創(chuàng)建的過程,相當于人的少年
- 存在期:說明組件的存在的過程,相當于人的中年
- 銷毀期:說明組件的銷毀的過程,相當于人的老年
創(chuàng)建創(chuàng)建期
創(chuàng)建期共分五個階段:
- ES5開發(fā)中,對應五個方法: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對應的真實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)組件間的通信。
到此這篇關于React中的生命周期和子組件的文章就介紹到這了,更多相關React 生命周期 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React+Spring實現(xiàn)跨域問題的完美解決方法
這篇文章主要介紹了React+Spring實現(xiàn)跨域問題的完美解決方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08React實現(xiàn)文件上傳和斷點續(xù)傳功能的示例代碼
這篇文章主要為大家詳細介紹了React實現(xiàn)文件上傳和斷點續(xù)傳功能的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
這篇文章主要介紹了Electron整合React使用搭建開發(fā)環(huán)境,本文分步驟給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值 ,需要的朋友可以參考下2020-06-06