hooks组件封装react_名符其实的react下一代状态管理器hox

自从 React16 版本发布 Hooks 以来&＃xff0c;大家纷纷上车尝鲜。毫无疑问&＃xff0c; Hooks 在一定程度上解决了组件间功能和逻辑复用的问题&＃xff0c;在组件间的逻辑的封装和复用确实真香&＃xff0c;但 Hooks 在数据状态的共享方法略有不足&＃xff0c;虽然可以使用 useReducer 实现数据状态管理&＃xff0c;但在一定程度上是对 redux 的思想的复用。我们知道 redux 、 Flux 、 dva 等这些 React 状态管理的工具&＃xff0c;实际上都是对 action 、 dispatch 、 reducer 、 useStore 、 Provider 、 Context 这些概念的排列组合&＃xff0c;概念太多&＃xff0c;学习入手成本较高&＃xff0c;项目使用都差不多&＃xff0c;会有产生许多的模版代码。

hox

既然如此是否有学习成本比较低&＃xff0c;入手简单的针对 Hooks 的状态管理器呢&＃xff1f;答案是有&＃xff0c;其中来自来自蚂蚁金服体验技术部 hox 就是这样一种工具。下面我们从学习、上手、原理几个方法聊聊这个被定为为下一代 React 状态管理器&＃xff0c;看看其是否符合其定位的目标。

学习

hox 来自蚂蚁金服体验技术部&＃xff0c;其背后的团队在 React 各种实践场景上都有很丰富的经验&＃xff0c;因此其后续的维护和迭代还是很靠谱的。可能因为其只有一个 API &＃xff0c;因此其文档也是十分简单的&＃xff0c;一眼就能看到头了。这对于我们前端的开发者而言就是很友好的&＃xff0c;由于千变万化的前端&＃xff0c;各种轮子、各种技术层出不穷&＃xff0c;前端的娃娃们表示学不动了。而这种只有一个 API 的工具&＃xff0c;我们表示还是可以学的动的。 hox 的详细文档可以参看 github 上的 readme 支持中英文&＃xff0c;链接如下&＃xff1a;

1. 中文文档 &＃xff1a; github.com/umijs/hox/b…
2. 英文文档 &＃xff1a; github.com/umijs/hox/b…

特性

hox 作为下一代的状态管理器&＃xff0c;其具有如下特性&＃xff1a;

1. 只有一个 API&＃xff0c;简单高效&＃xff0c;几乎无需学习成本
2. 使用 custom Hooks 来定义 model&＃xff0c;完美拥抱 React Hooks
3. 完美的 TypeScript 支持
4. 支持多数据源&＃xff0c;随用随取

上手

hox 的上手使用体验还是很不错的&＃xff0c;因为十分简单。talk is cheap&＃xff0c;show me code。我们直接上码看看。

import { useState } from "react";import { createModel } from "hox";function useCounter() { const [count, setCount] &＃61; useState(0); const decrement &＃61; () &＃61;> setCount(count - 1); const increment &＃61; () &＃61;> setCount(count &＃43; 1); return { count, decrement, increment };}export default createModel(useCounter);

import useCounterModel from "../models/counter";function App(props) { const { count, increment, decrement } &＃61; useCounterModel(); return (

使用 hox 就是这么简单&＃xff0c;通过 createModel 包装一下将 custom hook 变成 share hook &＃xff0c;就可以在各个组件之间共享数据状态&＃xff0c;并实现逻辑封装和复用。

原理

createModel 会创建一个 Executor 组件的实例&＃xff0c;并在执行 custom hook &＃xff0c; custom hook 的执行结果会被保存起来。最后&＃xff0c;它会返回一个新的 share hook 即是 model hook 实现数据和逻辑的共享。源码如下&＃xff1a;

import { ModelHook, UseModel } from "./types";import { Container } from "./container";import { Executor } from "./executor";import React, { useEffect, useRef, useState } from "react";import { render } from "./renderer";export function createModel(hook: ModelHook, hookArg?: P) { // 实例化一个容器&＃xff0c;通过发布订阅模式实现对状态改变的推送 const container &＃61; new Container(hook); // 实例化 Executor 组件&＃xff0c;当数据发生改变时&＃xff0c;notify 所有订阅者进行更新 render( { container.data &＃61; val; container.notify(); }} hook&＃61;{() &＃61;> hook(hookArg)} /> ); // useModel 这是 share hook const useModel: UseModel &＃61; depsFn &＃61;> { const [state, setState] &＃61; useState(() &＃61;> container ? (container.data as T) : undefined ); const depsFnRef &＃61; useRef(depsFn); depsFnRef.current &＃61; depsFn; const depsRef &＃61; useRef([]); useEffect(() &＃61;> { if (!container) return; function subscriber(val: T) { if (!depsFnRef.current) { setState(val); } else { const oldDeps &＃61; depsRef.current; const newDeps &＃61; depsFnRef.current(val); if (compare(oldDeps, newDeps)) { setState(val); } depsRef.current &＃61; newDeps; } } container.subscribers.add(subscriber); return () &＃61;> { container.subscribers.delete(subscriber); }; }, [container]); return state!; }; // share hook 代理 custom hook 返回的值 Object.defineProperty(useModel, "data", { get: function() { return container.data; } }); return useModel;}// 这是 hook 依赖项对比函数function compare(oldDeps: unknown[], newDeps: unknown[]) { if (oldDeps.length !&＃61;&＃61; newDeps.length) { return true; } for (const index in newDeps) { if (oldDeps[index] !&＃61;&＃61; newDeps[index]) { return true; } } return false;}

其原理图如下&＃xff1a;

总结

简言之&＃xff0c; hox 大道至简&＃xff0c;只有一个 API &＃xff0c;但其既能满足逻辑的封装和复用&＃xff0c;又能满足状态复用和管理&＃xff0c;值得尝试的状态管理器。