rab-react

@rabjs/react 快速参考

这是为大模型优化的 @rabjs/react (RSJS) 快速参考指南，聚焦最核心的使用模式。

🎯 五大核心概念

1. 响应式组件：observer 和 view

基本规则：组件必须使用 observer 或 view 包裹才能自动响应状态变化。

import { observer, view } from "@rabjs/react";

// ✅ 方式 1：observer（推荐用于函数组件）
const Counter = observer(() => {
  const service = useService(CounterService);
  return <div>{service.count}</div>; // 自动追踪 count 变化
});

// ✅ 方式 2：view（支持类组件和函数组件）
class Counter extends React.Component {
  render() {
    const { store } = this.props;
    return <div>{store.count}</div>;
  }
}
export default view(Counter);

// ❌ 错误：忘记使用 observer
const Counter = () => {
  const service = useService(CounterService);
  return <div>{service.count}</div>; // 不会自动更新！
};

关键点：

• 必须在 observer 内部访问 observable 属性
• 不要解构 observable 对象（会破坏响应性）
• view 和 observer 功能相同，view 额外支持类组件

2. Service：业务逻辑容器

基本规则：所有业务逻辑都应该封装在 Service 类中，包括组件内的操作方法。

import { Service } from "@rabjs/react";

export class CounterService extends Service {
  // 属性自动是 observable
  count = 0;

  // 方法自动是 action（批量更新）
  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  // 计算属性（getter）
  get doubleCount() {
    return this.count * 2;
  }

  // 异步方法自动追踪 loading 和 error
  async fetchData() {
    const response = await fetch("/api/data");
    this.count = await response.json();
  }
}

// 在组件中访问异步状态
const Component = observer(() => {
  const service = useService(CounterService);

  // 自动生成的状态
  if (service.$model.fetchData.loading) return <div>加载中...</div>;
  if (service.$model.fetchData.error) return <div>错误</div>;
  // 可以直接使用，框架会处理好 this指向问题
  return <div onClick={service.fetchData}>{service.count}</div>;
});

关键点：

• Service 类继承自 Service 基类
• 所有属性自动是响应式的（observable）
• 所有方法默认就是 action（批量更新），不需要也不应该再写 @Action 装饰器
• 只有需要关闭批量更新时才用 @SyncAction 标记方法
• 异步方法自动追踪 loading 和 error 状态（通过 $model.methodName）

3. useService + bindServices：连接组件和 Service

基本规则：使用 bindServices 注册 Service，使用 useService 获取 Service 实例。