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 邏輯庫。