github: http://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 是完全擁抱 React Hooks 的狀態管理器,model 層也是用 custom Hook 來定義的,它有以下幾個特性:
下面我們進入正題,hox 怎麼用?
任意一個 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)