組件間通信常見的幾種情況
一、父組件到子組件
二、子組件到父組件
三、跨級組件
四、非嵌套組件

1）父組件到子組件：通常父組件使用props向子組件傳遞，然后子組件處理
父組件Parent.js

子組件Child.js

在上面的例子中，父組件Parent通過title屬性向子組件Child傳遞值，子組件Child通過this.prop.title就可以獲取到父組件Parent的傳遞的值 2）子組件到父組件：利用回調函數
父組件Parent.js

子組件Child.js

上面例子中，在子組件Child中綁定了onClick事件。調用成本cb()方法。在cb()方法中，通過props發送出去一個方法，父組件中去接收這個方法，callback={this.callback}，然后在自身的callback函數中進行一些列操作。
3）跨級組件：即父組件向子組件的子組件通信，向更深層子組件通信①中間組件層層傳遞props②使用context對象
對于第一種方式，如果父組件結構較深，那么中間每一層組件都要去傳遞props，增加了復雜度，并且這些props并不是中間組件自己需要的。
使用context方式中context相當于一個全局變量，是一個大容器，我們可以把要通信的內容放在這個容器中，這樣不管嵌套多深。都可以隨意取用。使用context要滿足兩個條件：上級組件要聲明自己支持context，并提供一個函數來返回相應的context對象、子組件要聲明自己需要使用context
父組件Parent.js

子組件Child.js

子組件的子組件GrandChild.js

4）非嵌套組件：即沒有任何包含關系的組件，包括兄弟組件以及不在同一個父級中的非兄弟組件。①利用二者共同父組件的context對象通信②使用自定義事件
使用二者共同父級進行中轉會增加子組件和父組件間的耦合度，如果組件層次比較深，找到二者共同父組件會相對麻煩。
使用自定義事件方式需要使用events包：npm install -S events創建event.js文件，向外提供一個事件

父組件Parent.js

組件Aoo.js

組件Boo.js

實際應用中，在組件間進行通信時，這些通信方式都可以使用，區別只在于使用相應的通信方式的復雜程度和個人喜好，選擇最合適的那一個。比如，通過事件訂閱模式通信不止可以應用在非嵌套組件間，還可以用于跨級組件間，非嵌套組件間通信也可以使用context。

總結

以上是生活随笔為你收集整理的组件中使用_React四种组件通信详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。