react-ahax
React跨组件通信解决方案
Last updated 2 years ago by ehome .
MIT · Original npm · Tarball · package.json
$ cnpm install react-ahax 
SYNC missed versions from official npm registry.

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生命周期。

Current Tags

  • 1.0.3                                ...           latest (2 years ago)

4 Versions

  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 1
Last Month 13
Dependencies (4)

Copyright 2014 - 2016 © taobao.org |