**react 元件之間的通訊是基於 props 的單向資料流，即父元件通過 props 向子元件傳值，亦或是子元件執行傳入的函式來更新父元件的state，這都滿足了我們大部分的使用場景。
那 react 在兄弟元件之間如何通訊呢？**
一般地，對於兄弟元件之間的通訊，是通過它們共同的祖先元件進行的，即lifting state up，官方文件也有介紹。元件一通過事件將狀態變更通知它們共同的祖先元件，祖先組再將狀態同步到元件二。
但是，如果元件之間巢狀的比較深，即使提公升狀態到共同父元件，再同步狀態到相應的元件還是需要一層一層的傳遞下去，可能會比較繁瑣。
react 官方文件中介紹了 context 的用法, 在對應的場景中，context 就可以縮短父元件到子元件的屬性傳遞路徑。具體看例子：
在container.childcontexttypes中進行介面的宣告，通過 getchildcontext 返回更新後的state，在child.contexttypes中宣告要獲取的介面，這樣在子元件內部就能通過 this.context 獲取到。通過 context 這樣乙個中間物件，childone 和 childtwo 就可以相互通訊了。
注意，react context 也有一些侷限性：
react context 目前在 react 在是乙個experimental feature，在未來的版本中會有變化說不定，這點官方文件有說明。
在元件樹中，如果中間某乙個元件shouldcomponentupdate returning false了，會阻礙 context 的正常傳值，導致子元件無法獲取更新。
元件本身extends react.purecomponent也會阻礙 context 的更新。
解決 shouldcomponentupdate 與 context 之間衝突的方案也是有的，例如使用 redux 或者 mobx 等全域性單一狀態管理。
這裡拋磚引玉，介紹一種簡單的解決 context 不起作用的方法，它必須滿足兩個條件：
context 應該是唯一不可變的
元件只在初始化的時候去獲取 context
具體看**：
// theme stores the state of the current theme, and allows components
class theme
setcolor(color)
subscribe(f)
unsubscribe(f)
}export default class themeprovider extends react.component
componentwillreceiveprops(next)
getchildcontext()
}handlechange = (e) =>
render() )}
}themeprovider.childcontexttypes =
export default class themedtext extends react.component
componentdidmount()
updatetheme = () => )
}componentwillunmount()
render() )}
}themedtext.contexttypes =
*********************xx
react context 是巢狀層次較深的兄弟元件之間通訊的一種便捷方式，在某些使用場景作用是很強大的，所以需要謹慎使用。
最後推薦閱讀這篇文章：how to safely use react context
React之元件通訊
元件通訊無外乎，下面這三種父子元件，子父元件，平行元件 也叫兄弟元件 間的資料傳輸。下面我們來分別說一下 父子元件 var demo react.createclass tap function e render function this.state.res var child react.cre...
react 元件通訊
父元件通過props向子元件傳遞需要的資訊 parent.jsximport react,from react import son from components test1 class parent extends component render export default parent c...
React元件通訊
分類 父子元件通訊 無論父元件傳遞是props還是state,子元件都是通過props接收 子父元件通訊 父元件傳遞方法給子元件，子元件呼叫父元件傳遞過來的方法 注意 自己的狀態自己更改 非父子元件通訊 ref鏈 1.ref this.refs.2.ref this.推薦 跨元件通訊 context...