1.0.3 • Published 6 years ago
react-ahax v1.0.3
React跨组件通信解决方案
常规数据流
React本身是单向数据流，框架层面提供的通信方式为props、callback与状态提升，还有一个特殊的context。 常规场景React本身的通信方式完全可以满足需求，但在一些特殊场景下，没有关联关系的组件无法直接通信，仅靠以上方式会严重拖慢开发效率，并且代码的可维护性会降低。
为什么不使用Redux或Mobx？
- Redux和Mobx新概念较多，团队人数较多时很难统一开发范式
- 上手难度大，学习成本较高
- 代码侵入性较强，使用后很难剔除
react-ahax优势？
- 提供基于事件的组件通信方式，代码侵入性很小
学习成本低，掌握基本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生命周期。