父元件向子元件通訊
通訊是單向的，資料必須是由一方傳到另一方。在 React 中，父元件可以向子元件通過傳 props 的方式，向子元件進行通訊。

import React,{Component,PureComponent} from 'react'
import {Text,View} from 'react-native'
class Parent extends Component {
constructor(props) {
super(props)
this.state = {
msg:'I am your father!'
}
}
render() {
return <Son_1 msg={this.state.msg} />;
}
}
class Son_1 extends PureComponent {
render() {
return (

{this.props.msg}

)
}
}
如果父元件與子元件之間不止一個層級，如 Parent 與 Child_1_1 這樣的關係，可通過 ... 運算子（Object 剩餘和展開屬性），將父元件的資訊，以更簡潔的方式傳遞給更深層級的子元件。通過這種方式，不用考慮效能的問題，通過 babel 轉義後的 ... 運算子 效能和原生的一致，且上級元件 props 與 state 的改變，會導致元件本身及其子元件的生命週期改變。

class Son_1 extends PureComponent {
render() {
return (

{this.props.msg}
<Son_1_1 {...this.props}/>

)
}
}
class Son_1_1 extends PureComponent{
render() {
return (
{this.props.msg}
)
}
}
子元件向父元件通訊
在上一個例子中，父元件可以通過傳遞 props 的方式，自頂而下向子元件進行通訊。而子元件向父元件通訊，同樣也需要父元件向子元件傳遞 props 進行通訊，只是父元件傳遞的，是作用域為父元件自身的函式，子元件呼叫該函式，將子元件想要傳遞的資訊，作為引數，傳遞到父元件的作用域中。

import React,{Component,PureComponent} from 'react'
import {Text,TouchableOpacity} from 'react-native'
class Parent extends Component {
constructor(props) {
super(props)
this.state = {}
}
// 父元件定義的方法
onClickSon = (msgFromSon) => {
console.log(msgFromSon)
}
render() {
return (

)
}
}
class Son_1 extends PureComponent {
render() {
return (
<TouchableOpacity onPress={()=> this.props.onClickSon('I am your son')}>
爸爸去哪

)
}
}
觀察者模式 - DeviceEventEmitter
解決了兄弟元件通訊的問題

在傳統的前端解耦方面，觀察者模式作為比較常見一種設計模式，大量使用在各種框架類庫的設計當中。即使我們在寫 React，在寫 JSX，我們核心的部分還是 JavaScript。

觀察者模式也叫 釋出者-訂閱者模式，釋出者釋出事件，訂閱者監聽事件並做出反應，對於兄弟元件的通訊，我們一般使用 DeviceEventEmitter 解決。

import React,{Component,PureComponent} from 'react'
import {View,DeviceEventEmitter} from 'react-native'
class Parent extends Component{
render() {
return (

<Son_1/>
<Son_2/>

);
}
}
class Son_1 extends PureComponent{
componentDidMount() {
setTimeout(() => {
// 釋出 msg 事件
DeviceEventEmitter.emit('sendMsg', {text:'Hello Brother'});
}, 1000);
}
}
class Son_2 extends PureComponent{
componentDidMount() {
this.listener =DeviceEventEmitter.addListener('sendMsg',function(param){
// use param do something
});
}
//最後別忘了移除通知
componentWillUnmount(){
this.listener.remove();
}
}

參考地址：https://www.javascriptcn.com/read-36620.html