前言
自从React16
版本发布Hooks
以来,大家纷纷上车尝鲜。毫无疑问,Hooks
在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但Hooks
在数据状态的共享方法略有不足,虽然可以使用useReducer
实现数据状态管理,但在一定程度上是对redux
的思想的复用。我们知道redux
、Flux
、dva
等这些React
状态管理的工具,实际上都是对action
、dispatch
、reducer
、useStore
、Provider
、Context
这些概念的排列组合,概念太多,学习入手成本较高,项目使用都差不多,会有产生许多的模版代码。
hox
既然如此是否有学习成本比较低,入手简单的针对Hooks
的状态管理器呢?答案是有,其中来自来自蚂蚁金服体验技术部hox就是这样一种工具。下面我们从学习、上手、原理几个方法聊聊这个被定为为下一代React
状态管理器,看看其是否符合其定位的目标。
学习
hox
来自蚂蚁金服体验技术部,其背后的团队在React
各种实践场景上都有很丰富的经验,因此其后续的维护和迭代还是很靠谱的。可能因为其只有一个API
,因此其文档也是十分简单的,一眼就能看到头了。这对于我们前端的开发者而言就是很友好的,由于千变万化的前端,各种轮子、各种技术层出不穷,前端的娃娃们表示学不动了。而这种只有一个API
的工具,我们表示还是可以学的动的。hox
的详细文档可以参看github
上的readme
支持中英文,链接如下:
- 中文文档:https://github.com/umijs/hox/blob/master/README-cn.md
- 英文文档:https://github.com/umijs/hox/blob/master/README.md
特性
hox
作为下一代的状态管理器,其具有如下特性:
- 只有一个 API,简单高效,几乎无需学习成本
- 使用 custom Hooks 来定义 model,完美拥抱 React Hooks
- 完美的 TypeScript 支持
- 支持多数据源,随用随取
上手
hox
的上手使用体验还是很不错的,因为十分简单。talk is cheap,show me code。我们直接上码看看。