快速上手

安装

$ 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支持搭配React@16.8+（不支持concurrent mode）

• Vue2已停止开发维护,reaxes-vue2仅支持与Vue@2.7+

• reaxes-vue3支持Vue@3.2+

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

介绍

reaxes /rɪˈæksɪs/

Reaxes 读作/rɪˈæksɪs/

(一) reaxes指代reaxes系列库

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

见架构

reaxel /rɪˈæksəl/

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

见reaxel ; 示例(codesandbox)

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