> For the complete documentation index, see [llms.txt](https://kane-7.gitbook.io/reaxes-document/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kane-7.gitbook.io/reaxes-document/kuai-su-shang-shou.md).

# 快速上手

## 安装

`$ npm i -S reaxes`

(可选)根据你项目使用的不同视图库 :

**React :** `$ npm i -S reaxes-react` or

**Vue3 :** `$ npm i -S reaxes-vue3` or

**Vue2 :** `$ npm i -S reaxes-vue2 or`

~~**Angular :** `$ npm i -S reaxes-angular`~~

{% hint style="info" %}
Node: 

* **`reaxes-react`**`支持搭配React@16.8+（不支持concurrent mode）`
* `Vue2已停止开发维护,`**`reaxes-vue2`**`仅支持与Vue@2.7+`
* reaxes-vue3支持Vue\@3.2+

不与以上声明的视图库版本搭配使用也许可以正常工作，但因此产生的issue和pr会被忽略。如需获得保障，请将视图库版本修改至文档声明的支持的范围。
{% endhint %}

## 介绍

### reaxes  `/rɪˈæksɪs/`

<details>

<summary>Reaxes 读作<code>/rɪˈæksɪs/</code></summary>

(一) reaxes指代reaxes系列库

(二) reaxes代表以本库实现的以连锁响应式(chain-reaction)为核心的应用架构

见[架构](/reaxes-document/jia-gou-zhe-xue-yu-tu-li.md)

</details>

<details>

<summary><strong>reaxel</strong> <code>/rɪˈæksəl/</code></summary>

是业务的一个个"模块", 一个reaxel内部封装了业务数据、状态和逻辑，并对外暴露接口

[见reaxel](#reaxel-r-aeks-l) ;  [示例(codesandbox)](https://github.com)

</details>

reaxper  `/rɪˈækspər/`

Reaxlass`/rɪˈæklæs/`

#### **本文档专用术语和简写**

**`R-MAS`**:  Reactive Model(数据模型&逻辑体，一般封装为reaxel)-Action(用户行为触发的reax调用)-State(由被observable对象组成的业务逻辑派生出的被视图层使用的数据)三者的统称。

**`RH`**: React Hooks &#x20;

**`FC`:** functional components

**`CC`:** class components

**`reaxels`:** 基于mobx和reaxes的分布式`R-MAS体`, 为javascript应用提供响应式`MAS`封装

一直以来MVVM视图库的问题在于没有一种完美的方式抽离组件的状态,生命周期和行为(react hooks, react HoC虽然可以实现, 但存在破坏JSX结构、嵌套地狱等缺陷)。

## 先睹为快

从一个简单的计数器开始

{% embed url="<https://codesandbox.io/embed/eloquent-fast-dbbifb?fontsize=14&hidenavigation=1&theme=light>" %}

```javascript
//Counter.js
import { Reaxlass, reaxper } from "reaxes-react";

export const Counter = reaxper(
  class extends Reaxlass {
  
    reax_counter = reaxel_counter();

    render() {
      const { count } = this.reax_counter;

      return (
        <>
          <p>current count : {count}</p>
          <CounterBtn />
        </>
      );
    }
  }
);

const CounterBtn = reaxper(() => {
  const { count, setCount } = reaxel_counter();
  return <button onClick={() => setCount(count + 1)}>click me</button>;
});

```

```javascript
// reaxel-counter
import { orzMobx, reaxel } from "reaxes";
export const reaxel_counter = reaxel(function () {
  const { store, setState } = orzMobx({ count: 0 });

  return () => {
    return {
      get count() {
        return store.count;
      },
      setCount(count: number) {
        setState({ count });
      }
    };
  };
});

```

[CodeSandbox](https://codesandbox.io/embed/runtime-leaf-28erfi?fontsize=14\&hidenavigation=1\&theme=light)