@tarocch1/use-model v2.0.1

UseModel

一个基于 React Hooks 的状态管理工具。

Install

npm install @tarocch1/use-model

Usage

import { setModel, useModel } from '@tarocch1/use-model';

class CounterModel {
  count = 0;
  add() {
    this.count++;
  }
  async addAsync() {
    await new Promise(resolve => setTimeout(resolve, 1000));
    this.count++;
  }
}

setModel(CounterModel);

function Counter() {
  const counterModel = useModel(CounterModel);
  return (
    <>
      <p>Count: {counterModel.count}</p>
      <button onClick={counterModel.add}>+</button>
      <button onClick={counterModel.addAsync}>+ async</button>
    </>
  );
}

Api

setModel(Model)

初始化模型，接收一个模型构造函数作为参数。所有模型都应且仅应初始化一次，才可以使用。

getModel(Model)

用于在模型中获取其他模型, 接收一个模型构造函数作为参数。该函数只应在模型中使用，在组件中时应用 useModel 。

import { setModel, getModel, useModel } from '@tarocch1/use-model';

class OtherModel {
  count = 0;
  add() {
    this.count++;
  }
}
class CounterModel {
  count = 0;
  add() {
    const otherModel = getModel(OtherModel);
    otherModel.add();
  }
}

setModel(OtherModel);
setModel(CounterModel);

function Counter() {
  const otherModel = useModel(OtherModel);
  const counterModel = useModel(CounterModel);
  return (
    <>
      <p>Count: {otherModel.count}</p>
      <button onClick={counterModel.add}>+</button>
    </>
  );
}

useModel(Model, noRender = false)

获取模型的 Hook，在组件中使用，返回模型实例。接收两个参数：第一个参数为模型构造函数；第二个参数指定是否接收数据变化并重新渲染，当设置为 true 时，组件不会重新渲染，默认为 false ，当某个组件仅需要访问模型方法而不需要绑定模型数据时，可以使用该选项优化性能。

Credit

本项目借鉴了https://github.com/nanxiaobei/flooks的部分设计思路，修改了 api 格式以及一些底层实现方式以提高使用便捷度和更好地支持 TypeScript。