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 状态管理器
hox官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。