hox
hox 介绍
hox 是完全拥抱 react Hooks 的状态管理器，model 层也是用 custom Hook 来定义的，它有以下几个特性：
只有一个 API，简单高效，几乎无需学习成本
使用 custom Hooks 来定义 model，完美拥抱 react Hooks
完美的 TypeScript 支持
支持多数据源，随用随取
安装
yarn add hox
# 或
npm install --save hox
定义 Model
任意一个 custom Hook ，用 createModel 包装后，就变成了持久化，且全局共享的数据。
import { createModel } from 'hox';
/* 任意一个 custom Hook */
function useCounter() {
const [count,setCount] = useState(0);
const decrement = () => setCount(count - 1);
const increment = () => setCount(count + 1);
return {
count,
decrement,
increment
};
}
export default createModel(useCounter)
使用 Model
createModel 返回值是个 Hook，你可以按 react Hooks 的用法正常使用它。
import { useCounterModel } from "../models/useCounterModel";
function App(props) {
const counter = useCounterModel();
return (
<div>
<p>{counter.count}</p>
<button onClick={counter.increment}>Increment</button>
</div>
);
}
useCounterModel 是一个真正的 Hook，会订阅数据的更新。也就是说，当点击 "Increment" 按钮时，会触发 counter model 的更新，并且最终通知所有使用 useCounterModel 的组件或 Hook。
其它
基于上面的用法，你肯定已经知道了在 model 之间互相依赖怎么写了，就是单纯的 Hooks 互相依赖，自然而然咯。
import { useCounterModel } from "./useCounterModel";
export function useCounterDouble() {
const counter = useCounterModel();
return {
...counter,
count: counter.count * 2
};
}
只读不订阅更新就更简单了。
import { useCounterModel } from "./useCounterModel";
export function useCounterDouble() {
const counter = useCounterModel.data;
return {
...counter,
count: counter.count * 2
};
}
支持在 class 组件使用哦。
GitHub:https://github.com/umijs/hox
网站描述:下一代 React 状态管理器