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

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

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

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

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

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();
}}

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

<MyChild myFunc={this.handlechildFunc}/>

然后我們在通過子組件調(diào)用這個函數(shù)，代碼如下：

this.props.myFunc();

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

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

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

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

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>
);}}

在這串代碼中，我們可以通過點擊子組件中的 div 元素之后，我們可以在瀏覽器的控制臺可以看到輸出了這個 div 元素，這是因為我們在父組件中定義的事件監(jiān)聽器成功監(jiān)聽到了來自子組件冒泡上來的 click 事件。

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

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>);
}}

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

對于這個方法我們一般來說是不怎么使用這個方法的，因為當(dāng)我們在使用全局變量這個方法時需要注意的細節(jié)會比較多所以建議不熟練的小伙伴不要使用比較好，但是它還很實用，還可以幫我們節(jié)省大量時間；小編在這里建議大家在使用全局變量這個方法的時候要用 ?window.? 語法來明確定義，這樣還可以方便我們以后的管理維護。

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

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