亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

React中父子組件通信詳解

 更新時間:2022年08月28日 11:43:10   作者:公眾號_前端每日技巧  
這篇文章主要介紹了React中父子組件通信詳解,在父組件中,為子組件添加屬性數(shù)據(jù),即可實現(xiàn)父組件向子組件通信,文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下

父組件向子組件通信

在父組件中,為子組件添加屬性數(shù)據(jù),即可實現(xiàn)父組件向子組件通信。傳遞的數(shù)據(jù)可以分成兩類

子組件是作為屬性來接收這些數(shù)據(jù)的

第一類就是數(shù)據(jù):變量,對象,屬性數(shù)據(jù),狀態(tài)數(shù)據(jù)等等

這些數(shù)據(jù)發(fā)生改變,子組件接收的屬性數(shù)據(jù)就發(fā)生了改變。

第二類就是方法:父組件可以向子組件傳遞屬性方法,子組件接收方法,并可以在組件內(nèi)執(zhí)行,有兩種執(zhí)行方式

注意:父組件傳給子組件的方法是不能執(zhí)行的,執(zhí)行了相當(dāng)于將方法的返回值傳遞給子組件。

第一種 作為事件回調(diào)函數(shù)執(zhí)行

參數(shù)默認(rèn)就是事件對象

this默認(rèn)指向undefined,因此我們要改變this指向

如果在子組件中改變,

this指向子組件

bind方式傳遞的參數(shù)在事件對象之前

如果在父組件中改變(??工作中常用??)

this指向父組件了

此時子組件不論如何綁定,都指向父組件

bind方式傳遞的參數(shù)會在子組件傳遞的參數(shù)之前

參數(shù)順序:父組件參數(shù),子組件參數(shù),事件對象

第二種 在子組件方法中執(zhí)行

默認(rèn)沒有參數(shù),使用什么可以傳遞什么

this默認(rèn)指向子組件屬性對象(this.props)

此時我們要在父組件中綁定this,就指向了父組件

我們既可以訪問父組件實例化對象,也可以訪問子組件實例化對象,

我們既可以在子組件中傳遞參數(shù),也可以在父組件中傳遞參數(shù)

有一種簡寫方式(??工作中常用??)

直接在事件回調(diào)函數(shù)中,定義箭頭函數(shù),并執(zhí)行父組件方法:

// 定義父組件slider
class Slider extends Component {
// 構(gòu)造函數(shù)
constructor(props) {
super(props);
// 初始化狀態(tài)
this.state = {
title: '返回頂部'
}
}
// 父組件方法
parentMethod() {
console.log(this, arguments)
}
render() {
return (
<div className="slider">
{/*字符串*/}
{/*<GoTop text="網(wǎng)址導(dǎo)航"></GoTop>*/}
{/*屬性數(shù)據(jù)*/}
{/*<GoTop text={this.props.title}></GoTop>*/}
{/*狀態(tài)數(shù)據(jù)*/}
{/*<GoTop text={this.state.title}></GoTop>*/}
{/*傳遞方法*/}
<GoTop text={this.state.title} method={this.parentMethod.bind(this, 200, 'parent')}></GoTop>
{/*<GoTop text={this.state.title} method={this.parentMethod}></GoTop>*/}
</div>
)
}
}
// 定義組件
class GoTop extends Component {
// 定義方法
childMethod(e) {
// 執(zhí)行父組件方法
this.props.method(200, e);
}
// 4 渲染虛擬DOM
render() {
// console.log(this.props)
// 綁定事件
// return <span onClick={this.props.method.bind(this, 100, 'child')}>{this.props.text}</span>
// 在子組件方法中執(zhí)行
// return <span onClick={this.childMethod.bind(this)}>{this.props.text}</span>
// 簡便寫法
return <span onClick={e => this.props.method(e)}>{this.props.text}</span>
}
}

存在期

組件創(chuàng)建完成,一旦屬性數(shù)據(jù)或者狀態(tài)數(shù)據(jù)發(fā)生改變,組件就會進(jìn)入存在期,共分五個階段

第一個階段 組件即將接收新的屬性數(shù)據(jù)

componnetWillReceiveProps方法

第一個參數(shù)表示??新的??屬性數(shù)據(jù)

組件實例化對象上的是舊的屬性數(shù)據(jù)

數(shù)據(jù)還沒有更新,

??只有當(dāng)屬性數(shù)據(jù)發(fā)生改變,才會執(zhí)行該方法,狀態(tài)數(shù)據(jù)改變不會執(zhí)行??,直接進(jìn)入第二個階段

作用:用屬性數(shù)據(jù)去更新狀態(tài)數(shù)據(jù),實現(xiàn)數(shù)據(jù)由外部流入內(nèi)部

第二個階段 組件是否應(yīng)該更新

shouldComponentUpdate方法

第一個參數(shù)表示??新的??屬性數(shù)據(jù)

第二個參數(shù)表示??新的??狀態(tài)數(shù)據(jù)

組件實例化對象上的是舊的屬性數(shù)據(jù)

組件實例化對象上的是舊的狀態(tài)數(shù)據(jù)

必須有返回值,表示是否可以更新

true 可以更新

false 不能更新

工作中,我們常常比較

參數(shù)中的屬性數(shù)據(jù)是否與組件實例化對象中屬性數(shù)據(jù)是否不相等,或者

參數(shù)中的狀態(tài)數(shù)據(jù)是否與組件實例化對象中狀態(tài)數(shù)據(jù)是否不相等

作用:啟動更新優(yōu)化的作用,常常在高頻事件中使用。(類似節(jié)流作用)

第三個階段 組件即將更新

componentWillUpdate方法:

  • 第一個參數(shù)表示??新的??屬性數(shù)據(jù)
  • 第二個參數(shù)表示??新的??狀態(tài)數(shù)據(jù)

組件實例化對象上的是舊的屬性數(shù)據(jù)

組件實例化對象上的是舊的狀態(tài)數(shù)據(jù)

說明此時數(shù)據(jù)仍然沒有更新,當(dāng)該方法執(zhí)行完畢,數(shù)據(jù)才會更新

作用:更新插件,預(yù)處理數(shù)據(jù)等等,

注意:不要在第二個階段和第三個階段去更新屬性數(shù)據(jù)以及裝填數(shù)據(jù)

第四個階段 組件渲染視圖

render 方法

沒有參數(shù),但是此時數(shù)據(jù)已經(jīng)更新了

  • 組件實例化對象上的是??新的??屬性數(shù)據(jù)
  • 組件實例化對象上的是??新的??狀態(tài)數(shù)據(jù)

所以我們在渲染虛擬DOM的時候,可以使用這些新的數(shù)據(jù)了

此時虛擬DOM還沒有更新,方法執(zhí)行完畢,虛擬DOM才更新

第五個階段 組件更新完成

componentDidUpdate方法:

  • 第一個參數(shù)是舊的屬性數(shù)據(jù)
  • 第二個參數(shù)是舊的狀態(tài)數(shù)據(jù)

組件實例化對象上的是??新的??屬性數(shù)據(jù)

組件實例化對象上的是??新的??狀態(tài)數(shù)據(jù)

此時虛擬DOM也已經(jīng)更新完成了

組件更新完成了,我們可以在這個階段發(fā)送請求,處理事件等等,該方法執(zhí)行完畢,并沒有說明存在期的結(jié)束,存在期仍然繼續(xù),只是一次更新的結(jié)束,所有組件生命周期方法this都指向組件實例化對象

// 定義組件
class GoTop extends Component {
// 構(gòu)造函數(shù)
constructor(props) {
super(props);
this.state = {
text: props.text
}
}
// 存在期五個階段
// 1 組件即將接收新的屬性數(shù)據(jù)
componentWillReceiveProps(newProps) {
console.log(111, 'componentWillRecieveProps', newProps, this.props)
// 將屬性數(shù)據(jù),存儲到狀態(tài)中
this.setState({ text: newProps.text })
}
// 2 組件是否更新
shouldComponentUpdate(newProps, newState) {
console.log(222, 'shouldComponentUpdate', newProps, this.props, 'state', newState, this.state)
// 是否可以更新
// return true;
// 根據(jù)屬性或者狀態(tài)的改變來優(yōu)化
return newProps.text !== this.props.text || newState.text !== this.state.text
}
// 3 組件即將更新
componentWillUpdate(newProps, newState) {
console.log(333, 'componentWillUpdate', newProps, this.props, 'state', newState, this.state, findDOMNode(this).innerHTML)
}
// 4 渲染虛擬DOM
render() {
console.log(444, 'render', this.props, 'state', this.state)
// return <span>{this.props.text}</span>
return <span>{this.state.text}</span>
}
// 5 組件更新完成
componentDidUpdate(oldProps, oldState) {
console.log(555, 'componentDidUpdate', oldProps, this.props, 'state', oldState, this.state, findDOMNode(this).innerHTML)
}
// 組件創(chuàng)建完成
componentDidMount() {
window.onscroll = () => {
// 移動超過300顯示返回頂部
if (window.scrollY > 300) {
this.setState({
text: '返回頂部'
})
} else {
// 顯示頭條新聞
this.setState({
text: '頭條新聞'
})
}
// console.log(window.scrollY)
}
}
}

到此這篇關(guān)于React中父子組件通信詳解的文章就介紹到這了,更多相關(guān)React組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React高階組件使用詳細(xì)介紹

    React高階組件使用詳細(xì)介紹

    高階組件就是接受一個組件作為參數(shù)并返回一個新組件(功能增強的組件)的函數(shù)。這里需要注意高階組件是一個函數(shù),并不是組件,這一點一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧
    2023-01-01
  • Redux中異步action與同步action的使用

    Redux中異步action與同步action的使用

    本文主要介紹了Redux中異步action與同步action的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • react?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實現(xiàn)

    react?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實現(xiàn)

    這篇文章主要為大家介紹了react?Table準(zhǔn)備Spin、Empty、ConfigProvider組件實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
    2023-02-02
  • React State狀態(tài)與生命周期的實現(xiàn)方法

    React State狀態(tài)與生命周期的實現(xiàn)方法

    這篇文章主要介紹了React State狀態(tài)與生命周期的實現(xiàn)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-03
  • 深入理解react-router@4.0 使用和源碼解析

    深入理解react-router@4.0 使用和源碼解析

    這篇文章主要介紹了深入理解react-router@4.0 使用和源碼解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • React實現(xiàn)合成事件的源碼分析

    React實現(xiàn)合成事件的源碼分析

    React?中的事件,是對原生事件的封裝,叫做合成事件。抽象出一層合成事件,是為了做兼容,抹平不同瀏覽器之間的差異。本文將從事件綁定和事件觸發(fā)角度,帶大家解讀下源碼,感興趣的可以了解一下
    2022-12-12
  • React從插槽、路由、redux的詳細(xì)過程

    React從插槽、路由、redux的詳細(xì)過程

    React需要自己開發(fā)支持插槽功能,原理:父組件組件中寫入的HTML,可以傳入子組件的props中,這篇文章主要介紹了React從插槽、路由、redux的詳細(xì)過程,需要的朋友可以參考下
    2022-10-10
  • react實現(xiàn)數(shù)據(jù)監(jiān)聽方式

    react實現(xiàn)數(shù)據(jù)監(jiān)聽方式

    這篇文章主要介紹了react實現(xiàn)數(shù)據(jù)監(jiān)聽方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 學(xué)習(xí)ahooks useRequest并實現(xiàn)手寫

    學(xué)習(xí)ahooks useRequest并實現(xiàn)手寫

    這篇文章主要為大家介紹了學(xué)習(xí)ahooks useRequest并實現(xiàn)手寫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • react+antd動態(tài)增刪表單方式

    react+antd動態(tài)增刪表單方式

    這篇文章主要介紹了react+antd動態(tài)增刪表單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01

最新評論