hox - 下一代 React 狀態管理器

github: http://github.com/umijs/hox

別著急噴,我已經能想到你為什麼會進來看這個文章瞭,當你看到這個題目的時候,你一定會有幾連問:

基於 React Hooks 狀態管理器的輪子太多瞭,你們再造一個有什麼意思?

我並不是針對某個輪子,我隻想說現有所有的輪子都囿於 reduxunstated-next 的思想,無非就是 actiondispatchreduceruseStoreProviderContext 這些東西,在這些東西上做排列組合。概念一大堆,理解成本不低,用起來還都差不多。

為什麼你敢說你們是“下一代”?

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)

发表回复

相关推荐

一等功是什麼概念?榮譽稱號又意味著什麼,被無數英雄守護的國傢

作出怎樣貢獻的軍人可以獲得一等功?榮譽稱號和一等功有什麼區別?對於立功等級,有這樣一種簡單易懂的解釋:三等功-站著領、...

· 4分钟前

山東大學文學院考研經驗貼

23考研,本科雙非,一戰上岸山東大學文學院,617+813兩門專業課成績245+。下面主要分享兩門專業課復習經驗。適用於山東大學文...

· 7分钟前

總結人生六十歲,值得深思

光陰似箭,歲月如梭。當年的同學同事朋友,紛紛進入花甲之年。喟嘆生命好比過山車,咣當、咣當晃悠瞭大半輩子,嘎吱一下,驀...

· 11分钟前

湖南青馬心得

以下內容僅供參考很榮幸能夠參加本次的青馬學習培訓,在此次青馬培訓的過程中讓我得到瞭除瞭課堂以外的更加全面學習和鍛煉...

· 15分钟前

小说和散文的区别

一、概述小说和散文是人们接触比较多的文体,有很多人有时读到一些文章后搞不清楚是小说还是散文,其实,正是因为小说和散文 ...

· 22分钟前

Copyright 2015-2025 www.icpchaxun.com ©All Rights Reserved.