我的回答

props
redux
eventEmiter
context
provider, customer

参考回答

react组件间通信常见的几种情况：

• 父组件向子组件通信
• 子组件向父组件通信
• 跨级组件通信
• 非嵌套关系的组件通信

1.父组件向子组件通信：父组件通过props向子组件传递需要的信息

// 子组件Child 
const Child = props => {     
  return <p> {props.name} </p> 
} 
//父组件Parent 
const Parent=()=>{     
  return <Child name="zhufeng"></Child> 
}

2.子组件向父组件通信：props+回调的方式

//子组件Child 
const Child=props=>{     
  const cb=msg=>{         
    return ()=>{             
      props.callback(msg)         
    }     
  }     
  return (         
    <button onClick={cb("你好世界")}>sunny</button>     
    )
} 
//父组件 Parent 
class Parent extends Component{     
  callback(msg){         
    console.log(msg);     
  }     
  render(){         
    return <Child callback={this.callback.bind(this)}></Child>     
} }

3.跨级组件通信：即父组件向子组件的子组件通信，向更深子组件通信

// 使用props，利用中间组件层层传递，但是如果父组件结构较深，那么中间每一层组件都要去传递props，增加了复杂度，并且这些props并不是中间组件自己需要的。 
// 使用context,context相当于一个大容器，我们可以把要通信的内容放在这个容器中，这样不管嵌套多深，都可以随意取用，对于跨越多层的全局数据可以使用context实现 
// context方式实现跨级组件通信 
// context设计目的是为了共享那些对于一个组件而言是"全局"的数据 const BatteryContext=createContext(); 
// 子组件的子组件 
class GrandChild extends Component{     
  render(){         
    return(             
      <BatteryContext.Consumer>                 
        {                     
          color=><h1 style={{"color":color}}>红色的：{{color}}</h1>                 
        }             
      </BatteryContext.Consumer>         
        )     
    }
} 
//子组件 
const Child=()=>{     
  return(<GrandChild/>)
} 
//父组件 
class Parent extends Component{     
  state={color:'red'}     
  render(){         
    const {color}=this.state         
    return(            
      <BatteryContext.Provider value={color}>                 
        <Child></Child>             
      </BatteryContext.Provider>         
    )     
    } 
}

4.非嵌套关系的组件通信：既没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件

• 1)可以使用自定义事件通信(发布订阅模式)
• 2)可以通过redux等进行全局状态管理
• 3)如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点，结合父子间通信方式进行通信