react組件間的通信方法有哪些

這篇文章主要介紹了react組件間的通信方法有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react組件間的通信方法有哪些文章都會有所收獲，下面我們一起來看看吧。

1.Props

Props方法這是目前為止最常用的方式，他被用于在組件之間傳遞信息，而且我們在使用 props方法的時候還可以把數據從父組件傳遞到它的子組件中；而且 Props 是 React 的核心功能，也是 React 的基礎知識。

2.實例方法

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

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

3.回調函數

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

<MyChild myFunc={this.handlechildFunc}/>

然后我們在通過子組件調用這個函數，代碼如下：

this.props.myFunc();

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

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

這樣我們就完成了回調函數的使用了。

4.事件冒泡

事件冒泡這個方法并不是 React 的概念，而是瀏覽器中 DOM 的事件機制，冒泡事件的方法和回調函數類似；它也可以把數據從子組件發送到父組件。而且當我們想在父組件中捕獲來自子組件中的 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 元素，這是因為我們在父組件中定義的事件監聽器成功監聽到了來自子組件冒泡上來的 click 事件。

5.父組件

當我們在使用的過程中如果需要讓兩個組件之間相互通訊的話，那么它們肯定會擁有共同的父級組件，而且我們可以使用上述的策略組合，而且我們只是需要使用父級組件作為溝通的媒介，把數據作為父組件的 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>);
}}

6.觀察者模式

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

7.全局變量

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

8.Context

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

關于“react組件間的通信方法有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react組件間的通信方法有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。