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 等太難學習，使用繁瑣，如果你覺得 unstate-ndex Provider 嵌套太多，太亂的話，不妨試試 hox，保證會給你全新的開發體驗。

hox，下一代 React 狀態管理器。

文末再打個廣告：umi hooks 最好的 react hooks 邏輯庫。