快速上手

安装

$ 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

Node: reaxes-react支持搭配Reactv16.8 - v18.0使用（不支持concurrent mode）

因Vue2已停止开发,reaxes-vue2仅支持与v2.7及以上的Vue2搭配使用.

reaxes-vue3仅支持与v3.2及以上的Vue3搭配使用

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

介绍

reaxes /rɪˈæksɪs/是一个为Javascript应用提供以响应式数据模型&逻辑体(R-MAS)

reaxel /rɪˈæksəl/sdsd

reaxper /rɪˈækspər/

Reaxlass/rɪˈæklæs/

本文档专用术语和简写

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

RH: React Hooks

FC: functional components

CC: class components

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

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

先睹为快

从一个简单的计数器开始

//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>;
});

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