React中父子組件通信詳解
父組件向子組件通信
在父組件中,為子組件添加屬性數(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?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實現(xiàn)
這篇文章主要為大家介紹了react?Table準(zhǔn)備Spin、Empty、ConfigProvider組件實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-02-02React State狀態(tài)與生命周期的實現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實現(xiàn)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03react實現(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)手寫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03