> 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kane-7.gitbook.io/reaxes-document/kuai-su-shang-shou.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.