React中組件間的通信有一下幾種情況：
? ? ? ? 父組件向子組件通信，可以通過props方式傳遞數(shù)據(jù)；也可以通過ref防暑傳遞數(shù)據(jù)；
? ? ? ? 子組件向父組件通信，通過回調(diào)函數(shù)方式傳遞數(shù)據(jù)；
????????父組件向后代所有組件傳遞數(shù)據(jù)，如果組件層級過多，通過props的方式傳遞數(shù)據(jù)狠繁瑣，可以通過Context.Provider的方式；
? ? ? ? ?一個數(shù)據(jù)源實現(xiàn)跨組件通信，通過指定contextType的方式來實現(xiàn)
? ? ? ? 多個數(shù)據(jù)源實現(xiàn)跨組件通信，使用Context.Consumer方式實現(xiàn)；

1.父組件向子組件通信 ：

父組件向子組件通信有兩種方式，一是父組件通過熟悉進(jìn)行傳遞，子組件通過props接受，二就是父組件通過ref獲取到子組件的實例或者元素，調(diào)用子組件的方法進(jìn)行數(shù)據(jù)傳遞

2. 子組件向父組件通信 ：

子組件通過**回調(diào)函數(shù)**向父組件傳遞數(shù)據(jù)。子組件頭蓋骨this.props 接收父組件的方法后進(jìn)行調(diào)用

3.跨組件通信Context：

react 中數(shù)據(jù)是通過 props 屬性自上而下（由父及子）進(jìn)行傳遞的，但這種做法對于多層級父子關(guān)系的組件傳值是極其繁瑣的。react 提供了context api 來實現(xiàn)在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。React 16.3之后的contextapi 較之前的好用。?

3.1 父組件向后代組件通信
? ? ?1.使用 createContext() 創(chuàng)建一個context 對象（內(nèi)容為需要傳遞的數(shù)據(jù)），參數(shù)為默認(rèn)值；
? ? ?2.在父組件外層使用 <.Provider> 將當(dāng)前 context 的值傳遞給內(nèi)部所有的組件樹。
? ? ? 3.當(dāng)使用了 <.Provider> 后，不再讀取上面的默認(rèn)值，需要設(shè)置 value 屬性來進(jìn)行數(shù)據(jù)傳遞。當(dāng)組件需要讀取數(shù)據(jù)時，
? ? ?4.指定 contextType 讀取當(dāng)前的 context 對象（即剛開始創(chuàng)建的 context）；

3.2 多個數(shù)據(jù)源實現(xiàn)跨組件通信
? ? ? ?1.使用 import `導(dǎo)入要讀取的數(shù)據(jù)文件`。
? ? ? ?2. 使用<.Consumer> ，它里面的語法是`函數(shù)組件的語法`，函數(shù)接收的 `參數(shù)` 為當(dāng)前 createContext() 里的默認(rèn)值。
? ? ? 3. ?<.Consumer> 可以嵌套使用，也可以平級使用。

3.3 Context 的使用場景
? ? ?1. Context 主要應(yīng)用場景在于**很多不同層級的組件需要訪問同樣一些的數(shù)據(jù)**。請謹(jǐn)慎使用，因為這會使得組件的復(fù)用性變差。**如果用組件組合可以解決的問題，就不要使用 Context** 。
? ? ? 2.使用 context 的通用的場景包括管理當(dāng)前的 locale，theme，或者一些緩存數(shù)據(jù)。

3.4 Context 總結(jié)
? ?1. `React.createContext(defaultValue)` 創(chuàng)建一個 Context 對象。
? ? 2. ?`Class.contextType`，掛載在 class 上的 contextType 屬性會被賦值為一個 Context 對象。這能讓你使用 `this.context` 來消費(fèi)最近的 Context 上的數(shù)據(jù)。你可以在任何生命周期中訪問到它，包括 render 函數(shù)中。
?????3.`Context.Provider`，接收一個 value 屬性，傳遞給消費(fèi)組件。一個 Provider 可以和多個消費(fèi)組件有對應(yīng)關(guān)系。多個 Provider 也可以嵌套使用，里層的會覆蓋外層的數(shù)據(jù)。
? ? ?4. Context.Consumer，是函數(shù)作為子元素（function as a child）這種做法。這個函數(shù)參數(shù)接收當(dāng)前的 context 值，返回一個 React 節(jié)點。傳遞給函數(shù)的 value 等同于往上組件樹離這個 context 最近的 Provider 提供的 value 值。如果沒有對應(yīng)的 Provider，value 參數(shù)等同于傳遞給 createContext() 的 defaultValue。
? ? 5. `Context.displayName`，瀏覽器中調(diào)試用。
? ? 6. **Consumer 一般情況下都是和 Provider 同時使用。**
????????6.1 當(dāng) Provider 的 value 值發(fā)生變化時，它內(nèi)部的所有消費(fèi)組件都會重新渲染。Provider 及其內(nèi)部 consumer 組件都不受制于 shouldComponentUpdate 函數(shù)，因此當(dāng) consumer 組件在其祖先組件退出更新的情況下也能更新。

Redux：

上面有提到使用 Context 做組件間的通訊會使得組件的復(fù)用性變差，如果項目比較復(fù)雜、模塊比較很多的情況，推薦使用 Redux 來做組件間的通信。
? ? ? ?1.react-redux 提供兩個核心的api：
? ? ? ? 2. Provider: 提供store，根據(jù)單一store原則 ，一般只會出現(xiàn)在整個應(yīng)用程序的最頂層。
? ? ? ? 3.connect: 用于連接展示組件和 redux store。
? ? ? ? 4. connect 的語法格式為：

connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(component)

? ? ? ? ? ? ? ?4.1 一般來說只會用到前面兩個，它的作用是：
? ? ? ? ? ? ? ? 4.2 把store.getState()的狀態(tài)轉(zhuǎn)化為展示組件props上的屬性
? ? ? ? ? ? ? ? 4.3 把a(bǔ)ctionCreators轉(zhuǎn)化為展示組件props上的方法
? ? 只要上層中有`Provider`組件并且提供了`store`, 那么，子孫級別的任何組件，要想使用`store`里的狀態(tài)，都可以通過`connect`方法進(jìn)行連接。如果只是想連接`actionCreators`，可以第一個參數(shù)傳遞為`null`。文章來源地址http://www.zghlxwxcb.cn/news/detail-624661.html

到了這里，關(guān)于React中組件通信有哪些方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！