父組件向子組件通信

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

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

第一類(lèi)就是數(shù)據(jù)：變量，對(duì)象，屬性數(shù)據(jù)，狀態(tài)數(shù)據(jù)等等

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

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

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

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

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

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

如果在子組件中改變，

this指向子組件

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

如果在父組件中改變（??工作中常用??）

this指向父組件了

此時(shí)子組件不論如何綁定，都指向父組件

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

參數(shù)順序：父組件參數(shù)，子組件參數(shù)，事件對(duì)象

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

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

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

此時(shí)我們要在父組件中綁定this，就指向了父組件

我們既可以訪問(wèn)父組件實(shí)例化對(duì)象，也可以訪問(wèn)子組件實(shí)例化對(duì)象，

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

有一種簡(jiǎn)寫(xiě)方式（??工作中常用??）

直接在事件回調(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>
// 簡(jiǎn)便寫(xiě)法
return <span onClick={e => this.props.method(e)}>{this.props.text}</span>
}
}

存在期

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

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

componnetWillReceiveProps方法

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

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

數(shù)據(jù)還沒(méi)有更新，

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

作用：用屬性數(shù)據(jù)去更新?tīng)顟B(tài)數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)由外部流入內(nèi)部

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

shouldComponentUpdate方法

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

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

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

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

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

true 可以更新

false 不能更新

工作中，我們常常比較

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

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

作用：啟動(dòng)更新優(yōu)化的作用，常常在高頻事件中使用。（類(lèi)似節(jié)流作用）

第三個(gè)階段 組件即將更新

componentWillUpdate方法：

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

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

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

說(shuō)明此時(shí)數(shù)據(jù)仍然沒(méi)有更新，當(dāng)該方法執(zhí)行完畢，數(shù)據(jù)才會(huì)更新

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

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

第四個(gè)階段 組件渲染視圖

render 方法

沒(méi)有參數(shù)，但是此時(shí)數(shù)據(jù)已經(jīng)更新了

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

所以我們?cè)阡秩咎摂MDOM的時(shí)候，可以使用這些新的數(shù)據(jù)了

此時(shí)虛擬DOM還沒(méi)有更新，方法執(zhí)行完畢，虛擬DOM才更新

第五個(gè)階段 組件更新完成

componentDidUpdate方法:

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

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

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

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

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

// 定義組件
class GoTop extends Component {
// 構(gòu)造函數(shù)
constructor(props) {
super(props);
this.state = {
text: props.text
}
}
// 存在期五個(gè)階段
// 1 組件即將接收新的屬性數(shù)據(jù)
componentWillReceiveProps(newProps) {
console.log(111, 'componentWillRecieveProps', newProps, this.props)
// 將屬性數(shù)據(jù)，存儲(chǔ)到狀態(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)的改變來(lá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 = () => {
// 移動(dòng)超過(guò)300顯示返回頂部
if (window.scrollY > 300) {
this.setState({
text: '返回頂部'
})
} else {
// 顯示頭條新聞
this.setState({
text: '頭條新聞'
})
}
// console.log(window.scrollY)
}
}
}

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

最新評(píng)論