# react-ahax

> React跨组件通信解决方案

Latest version **1.0.3** (published 2018-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ahax
pnpm add react-ahax
yarn add react-ahax
bun add react-ahax
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-03-16 |
| First published | 2018-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 26.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aha |
| Maintainers | ehome |
| Keywords | React |

## Links

- npm: https://www.npmjs.com/package/react-ahax
- npm.io page: https://npm.io/package/react-ahax

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.2.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.2
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^3.0.1
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^2.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-03-16
- 1.0.2 — 2018-03-07
- 1.0.1 — 2018-01-22
- 1.0.0 — 2018-01-17

## README

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

---
_Source: https://npm.io/package/react-ahax · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._