React跨组件通信解决方案

常规数据流

React本身是单向数据流，框架层面提供的通信方式为props、callback与状态提升，还有一个特殊的context。 常规场景React本身的通信方式完全可以满足需求，但在一些特殊场景下，没有关联关系的组件无法直接通信，仅靠以上方式会严重拖慢开发效率，并且代码的可维护性会降低。

为什么不使用Redux或Mobx？

1. Redux和Mobx新概念较多，团队人数较多时很难统一开发范式
2. 上手难度大，学习成本较高
3. 代码侵入性较强，使用后很难剔除

react-ahax优势？

1. 提供基于事件的组件通信方式，代码侵入性很小
2. 学习成本低，掌握基本React知识即可上手使用react-ahax

react-ahax有哪些API？

Provider、@observer()、@inject()

| 参数 | 说明 | | ---------| ----------------- | | Provider | 注入store,利用context与任意子组件通信 | | @inject('store') | 将组件连接到提供的store，通过this.props.store拿到当前上下文 | | @observer([]) | 在React组件上监听事件，监听多个actionType时在onEventAction需要使用switch |

在observer之后react组件会多了一个onEventAction(action)生命周期和this.dispatch(action)方法。 跨组件通信时，组件A可通过调用this.dispatch()方法，触发监听该action的组件B的onEventAction生命周期。