react組件之間有哪些通信方法？組件之間的8種通訊方式！

在React學(xué)習(xí)中我們會(huì)遇到不同的問(wèn)題，而且在網(wǎng)上也是擁有很多。那么今天我們就來(lái)說(shuō)說(shuō)“react組件之間有哪些通信方法？”這個(gè)問(wèn)題吧！下面是小編分享的一些相關(guān)信息和內(nèi)容，大家可以作為參考和了解！

這是一張有關(guān)于組件之間相互通信的圖片大家可以了解一下。那么對(duì)于這個(gè)組件通信有下面這幾點(diǎn)：

Props方法這是目前為止最常用的方式，他被用于在組件之間傳遞信息，而且我們?cè)谑褂?props方法的時(shí)候還可以把數(shù)據(jù)從父組件傳遞到它的子組件中；而且 Props 是 React 的核心功能，也是 React 的基礎(chǔ)知識(shí)。更多相關(guān)的知識(shí)和內(nèi)容我們可以前往W3cschool這個(gè)網(wǎng)站學(xué)習(xí)和了解。

我們通過(guò)在父組件中擁有 refs 從而來(lái)引用子組件，之后就可以實(shí)現(xiàn)調(diào)用子組件的實(shí)例方法了。也就是我們說(shuō)的另一種從父組件訪問(wèn)子組件的方式；代碼如下：

class Thechild extends React.component {
myFunc(){
return “he11o";}
}}
class TheParent extends React.Component {
render(){
return(
<Thechi1d
ref-{foo-> {
this.foo =foo;
}}/>);}
componentDidMount( f
var x= this.foo.myFunc();
}}

我們通過(guò)方法一和方法二知道怎么把數(shù)據(jù)從我們的父組件傳給我們的子組件，然而在我們的父組件中可以把一個(gè)屬性傳給子組件如下代碼：

<MyChild myFunc={this.handlechildFunc}/>

然后我們?cè)谕ㄟ^(guò)子組件調(diào)用這個(gè)函數(shù)，代碼如下：

this.props.myFunc();

最后我們還需要在子組件中聲明這個(gè)函數(shù)，代碼如下：

MyChiid.propTypes ={
myFunc: React.PropTypes.func};

這樣我們就完成了回調(diào)函數(shù)的使用了。

事件冒泡這個(gè)方法并不是 React 的概念，而是瀏覽器中 DOM 的事件機(jī)制，冒泡事件的方法和回調(diào)函數(shù)類似；它也可以把數(shù)據(jù)從子組件發(fā)送到父組件。而且當(dāng)我們想在父組件中捕獲來(lái)自子組件中的 DOM 事件時(shí)，就可以采用這個(gè)方法了。代碼如下：

class Childcomponent extends React.component {
render( ){
return(
<div>This is child component</div>);
}}
class Parentcomponent extends React.component {
handleclick(evt) {
console.log(evt.target);}
render(){
return(
<div onclick = {this.handleclick } >
<childcomponent/>
</div>
);}}

在這串代碼中，我們可以通過(guò)點(diǎn)擊子組件中的 div 元素之后，我們可以在瀏覽器的控制臺(tái)可以看到輸出了這個(gè) div 元素，這是因?yàn)槲覀冊(cè)诟附M件中定義的事件監(jiān)聽(tīng)器成功監(jiān)聽(tīng)到了來(lái)自子組件冒泡上來(lái)的 click 事件。

當(dāng)我們?cè)谑褂玫倪^(guò)程中如果需要讓兩個(gè)組件之間相互通訊的話，那么它們肯定會(huì)擁有共同的父級(jí)組件，而且我們可以使用上述的策略組合，而且我們只是需要使用父級(jí)組件作為溝通的媒介，把數(shù)據(jù)作為父組件的 state 和方法來(lái)定義就可以了。代碼如下：

class Parentcomponent extends React.component{ 
render(){
return(
<div>
< SiblingA
 myProp = {this.state.propA}
myFunc = {this.siblingAFunc}/>
< SiblingB
myProp = { this.state.propB}
myFunc = {this.siblingBFunc}/>
</div>);
}}

觀察者模式這個(gè)方法是一種軟件設(shè)計(jì)模式，而且是擁有一個(gè)對(duì)象可以在需要時(shí)發(fā)送數(shù)據(jù)到多個(gè)其他對(duì)象的功能；不僅如此這種方式適用于所有組件，不需要時(shí)父子組件或者平級(jí)組件；在我們平常中的做法是將在? componentDidMount()?中的訂閱事件，通過(guò)在 ?componentWillUnmount() ?里取消訂閱，然后當(dāng)我們?cè)诮邮帐录r(shí)調(diào)用 setState() 方法就可以實(shí)現(xiàn)了。而且現(xiàn)在網(wǎng)絡(luò) 上也有很多庫(kù)可以實(shí)現(xiàn)觀察者模式，比如：PubSubJS，EventEmitter等等這些方法。

對(duì)于這個(gè)方法我們一般來(lái)說(shuō)是不怎么使用這個(gè)方法的，因?yàn)楫?dāng)我們?cè)谑褂萌肿兞窟@個(gè)方法時(shí)需要注意的細(xì)節(jié)會(huì)比較多所以建議不熟練的小伙伴不要使用比較好，但是它還很實(shí)用，還可以幫我們節(jié)省大量時(shí)間；小編在這里建議大家在使用全局變量這個(gè)方法的時(shí)候要用 ?window.? 語(yǔ)法來(lái)明確定義，這樣還可以方便我們以后的管理維護(hù)。

Context 這個(gè)方法和我們得第一種方法 props 類似，但是這個(gè)方法它不是和props方法一樣是單個(gè)子組件傳遞數(shù)據(jù)，它是可以為整個(gè)子樹(shù)提供數(shù)據(jù)的；而且Context 只可以在樹(shù)中向下傳遞數(shù)據(jù)（父組件到子樹(shù)）。而且還可以配合回調(diào)函數(shù)來(lái)向上傳遞數(shù)據(jù)（子樹(shù)到父組件）。

關(guān)于“react組件之間有哪些通信方法？”這個(gè)問(wèn)題，小編為大家整理了八個(gè)點(diǎn)希望對(duì)大家有所幫助，當(dāng)然如果你有更好的方法或者點(diǎn)子也可以提出來(lái)和大家分享噢！更多有關(guān)于react學(xué)習(xí)方面的內(nèi)容我們都可以在React 教程中進(jìn)行學(xué)習(xí)。