hox - 下一代 React 状态管理器

github: https://github.com/umijs/hox

别着急喷，我已经能想到你为何会进来看这个文章了，当你看到这个题目的时候，你必定会有几连问：

基于 React Hooks 状态管理器的轮子太多了，大家再造一个有什么意思？

我并非针对某个轮子，我只想说现有全部的轮子都囿于 redux ， unstated-next 的思想，无非就是 action ， dispatch ， reducer ， useStore ， Provider ， Context 这些东西，在这些东西上作排列组合。概念一大堆，理解成本不低，用起来还都差很少。

为何你敢说大家是“下一代”？

hox 够简单，一个 API，几乎无学习成本。够好用，你会用 Hooks，就会用 hox。我想象不到比咱们更简单，更好用的轮子怎么造出来？

不想看，不想学，学不动了，咋办？

一个 API，眼睛一瞪就会用，没有任何学习成本。

大家够权威吗？大家会弃坑吗？

hox 的开发者来自蚂蚁金服体验技术部，咱们有 umi、dva、antd、antv 等一堆开源软件，团队足够权威。

同时 hox 的思想足够简单，放心用好了。

大家能彻底替代 redux，dva 吗？

状态管理器解决的问题都同样，用 hox 彻底能够实现全部需求。

hox 介绍

hox 是彻底拥抱 React Hooks 的状态管理器，model 层也是用 custom Hook 来定义的，它有如下几个特性：

• 只有一个 API，简单高效，几乎无需学习成本
• 使用 custom Hooks 来定义 model，完美拥抱 React Hooks
• 完美的 TypeScript 支持
• 支持多数据源，随用随取

下面咱们进入正题，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 组件使用哦。

经典用户故事

你确定遇到过这样的场景：

• 一开始你把逻辑和数据都放在组件中，每次组件重建，数据都会重置掉。
• 某一天，你想在把数据存起来，每次组件重建，不会从新刷新数据了。
• 假设你用的 redux，你须要从新翻译一遍逻辑，彻底重写逻辑和数据层，不知道有多痛苦。

若是你用 hox，故事就彻底不同了，你只须要把逻辑和数据层代码直接复制出去就完事了。

• 好比你开始的代码是这样的：

const CountApp = () => {
  const [count, setCount] = useState(0)
  const decrement = () => setCount(count - 1)
  const increment = () => setCount(count + 1)

  return (
    <div>
      count: {count}
      <button onClick={increment}>自增</button>
      <button onClick={decrement}>自减</button>
    </div>
  )
}

• 若是你想持久化数据，每次进来想恢复上一次的 count，把逻辑代码复制出来，用 createModel 包一层就完事了。

import { createModel } from 'hox';

/* 逻辑原样复制过来 */
function useCounter() {
  const [count, setCount] = useState(0);
  const decrement = () => setCount(count - 1);
  const increment = () => setCount(count + 1);
  return {
    count,
    decrement,
    increment
  };
}
/* 用 createModel 包一下就行 */
export default createModel(useCounter)

import { useCounterModel } from "./useCounterModel";

export function CountApp() {
  const {count, increment, decrement} = useCounterModel();
  return (
    <div>
      count: {count}
      <button onClick={increment}>自增</button>
      <button onClick={decrement}>自减</button>
    </div>
  )
}

总结

讲完了，核心内容很短，由于足够简单，更多内容能够见 github。若是你以为 redux、dva 等太难学习，使用繁琐，若是你以为 unstated-next Provider 嵌套太多，太乱的话，不妨试试 hox，保证会给你全新的开发体验。

hox，下一代 React 状态管理器。

文末再打个广告：umi hooks 最好的 react hooks 逻辑库。