手把手教你写一个|手把手教你写一个 React 状态管理库手把手教你写一个React状态管理

自从 React Hooks 推行后，Redux 作为状态管理方案就显得格格不入了。Dan Abramov 很早就提到过 “You might not need Redux”，开发者必须要写很多“模式代码”，繁琐以及重复是开发者不愿意容忍的。除了 actions/reducers/store 等概念对新手不够友好之外，最大的缺点就是它对 typescript 类型支持太烂，在大型项目中这是不可接受的。
通过对 Redux 的优缺点总结来看，我们可以自己写一个状态管理库，本次需要达到的目的：

typescript 类型要完善
足够简单，概念要少
与 React Hooks 要搭配

因此，阅读此文档的前提要对 React Hooks 、typescript 等有一定的概念。OK, 那我们开始吧。
思路
目前流行的状态管理库很多都太复杂了，夹杂着大量的概念及 API，我们需要规划着如何实现它。状态管理也就是状态提升的极致表现。我们的目的是要足够简单， API 少。
思考一下，我们是否可以考虑用 Context 去穿透做管理，用最基本的 useState 等 hooks 做状态存储，那么就尝试下吧。
这是三个最简单的函数式组件 Demo，我们用它来试验：

function App() { return ; }function Card() { return ; }function CardBody() { return Text; }

实现
我们定义 Context，一个很基本的状态模型

// 描述 Context 的类型 interface IStoreContext { count: number; setCount: React.Dispatch>; increment: () => void; decrement: () => void; }// 创建一个 Context，无需默认值，这里为了演示方便，用了断言 export const StoreContext = React.createContext(undefined as unknown as IStoreContext);

以及定义基本的 state，并配合 Context

function App() { // 定义状态 const [count, setCount] = React.useState(0); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); // 包裹 Provider，所有子组件都能拿到 context 的值 return (); }

接下来我们在 CardBody 中使用这个 Context，使其穿透取值

function CardBody() { // 获取外层容器中的状态 const store = React.useContext(StoreContext); return Text {store.count}; }

这样，一个最简单的穿透状态管理的代码写好了。发现问题了吗，状态的业务逻辑写在了 App 组件里，这个代码耦合度太高了！我们来整理一下，需要将 App 的状态通过自定义 hook 抽离出去，保持逻辑与组件的纯粹性。

// 将 App 中的状态用自定义 hook 管理，逻辑和组件的表现抽离 function useStore() { // 定义状态 const [count, setCount] = React.useState(0); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); return { count, setCount, increment, decrement, }; }

在 App 中使用这个 hook

function App() { const store = useStore(); return (); }

现在来看是不是舒心多了，逻辑在单独的 hook 中控制，具有高内聚的特点。想想也许还不够，useStore 和 StoreContext 的逻辑还不够内聚，继续：
将 useStore 和 StoreContext.Provider 抽离成一个组件

const Provider: React.FC = ({ children }) => { const store = useStore(); return {children}; };

再来看 App 组件，是不是很清晰？

function App() { return (); }

好了，我们可以将这个模式封装成一个方法，通过工厂模式来创建 Context 和 Provider。

// 将自定义 Hook 通过参数传入 // 定义泛型描述 Context 形状 export function createContainer(useHook: (initialState?: State) => Value) { const Context = React.createContext(undefined as unknown as Value); const Provider: React.FC<{ initialState?: State }> = ({ initialState, children }) => { // 使用外部传入的 hook const value = https://www.it610.com/article/useHook(initialState); return {children}; }; return { Provider, Context }; }

OK，一个简单的状态管理算成型了。好不好用我们来试试，将之前定义的 useStore 的代码移入 createContainer 里

export const BaseStore = createContainer(() => { // 定义状态 const [count, setCount] = React.useState(0); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); return { count, setCount, increment, decrement, }; });

在 App 中替换为 BaseStore 导出的 Provider

function App() { return ( ); }

在 CardBody 使用 BaseStore 导出的 Context，因为定义的时候用了泛型，这里能完美识别当前 store 的形状，从而具备编辑器智能提示

function CardBody() { const store = React.useContext(BaseStore.Context); return Text {store.count}; }

那么恭喜你，你已经创建了一个属于自己的状态管理库，我们给它取个名字叫 unstated-next
调整
但是方便和性能总是有所取舍的，毫无疑问，成也 Context，败也 Context。因为它的穿透无差别更新特性也就决定了会让所有的 React.memo 优化失效。一次 setState 几乎让整个项目跟着 rerender ，这是极为不可接受的。因为自定义 Hook 每次执行返回的都是一个全新的对象，那么 Provider 每次都会接受到这个全新的对象。所有用到这个 Context 的子组件都跟着一起更新，造成无意义的损耗调用。
【手把手教你写一个|手把手教你写一个 React 状态管理库】有方案吗？想一想，办法总比困难多。我们可以优选 Context 上下文的特性，放弃导致重新渲染的特性（即每次传给他一个固定引用）。这样的话状态改变，该更新的子组件不跟着更新了怎么办，有什么办法触发 rerender 呢？答案是 setState，我们可以将 setState 方法提升到 Context 里，让容器去调度调用更新。

// createContainer 函数中// 首先我们可以将 Context 设置为不触发 render // 这里 createContext 第二个参数的函数返回值为 0 即为不触发 render // 注意：这个 API 非正规。当然也可以用 useRef 转发整个 Context 的值，使其不可变 // 用非正规的 API 仅仅只是为了不用 ref 而少点代码 const Context = React.createContext(undefined as unknown as Value, () => 0);

那现在 Context 已经是不可变了，该如何实现更新逻辑呢？思路可以是这样：我们在子组件 mount 时添加一个 listener 到 Context 中，unMount 时将其移除，Context 有更新时，调用这个 listener，使其 rerender。
声明一个 Context，用来放这些子组件的 listener

// createContainer 函数中 const ListenerContext = React.createContext void>>(new Set());

现在子组件中需要这样一个 hook，想选择 store 里的某些状态去使用，无相关的 state 改变不用通知我更新。
那么我们就起个名字叫 useSelector，用来监听哪些值变化可以让本组件 rerender。
函数类型可以这样定义：通过传入一个函数，来手动指定需要监听的值，并返回这个值

// createContainer 函数中function useSelector(selector: (value: Value) => Selected): Selected {}

那我们来实现这个 useSelector 。首先是触发 rerender 的方法，这里用 reducer 让其内部自增，调用时不用传参数

const [, forceUpdate] = React.useReducer((c) => c + 1, 0);

这里我们需要和容器中的 Context 通信，从而获取所有状态传给 selector 函数

// 这里的 Context 已经不具备触发更新的特性 const value = https://www.it610.com/article/React.useContext(Context); const listeners = React.useContext(ListenerContext); // 调用方法获取选择的值 const selected = selector(value);

创建 listener 函数，通过 Ref 转发，将选择后的 state 提供给 listener 函数使用，让这个函数能拿到最新的 state，

const StoreValue = https://www.it610.com/article/{ selector, value, selected, }; const ref = React.useRef(StoreValue); ref.current = StoreValue;

实现这个 listener 函数

function listener(nextValue: Value) { try { const refValue = https://www.it610.com/article/ref.current; // 如果前后对比的值一样，则不触发 render if (refValue.value === nextValue) { return; } // 将选择后的值进行浅对比，一样则不触发 render const nextSelected = refValue.selector(nextValue); // if (isShadowEqual(refValue.selected, nextSelected)) { return; } } catch (e) { // ignore } // 运行到这里，说明值已经变了，触发 render forceUpdate(); }

我们需要在组件 mount/Unmount 的时候添加/移除 listener

React.useLayoutEffect(() => { listeners.add(listener); return () => { listeners.delete(listener); }; }, []);

完整实现如下：

function useSelector(selector: (value: Value) => Selected): Selected { const [, forceUpdate] = React.useReducer((c) => c + 1, 0); const value = https://www.it610.com/article/React.useContext(Context); const listeners = React.useContext(ListenerContext); const selected = selector(value); const StoreValue = { selector, value, selected, }; const ref = React.useRef(StoreValue); ref.current = StoreValue; React.useLayoutEffect(() => { function listener(nextValue: Value) { try { const refValue = https://www.it610.com/article/ref.current; if (refValue.value === nextValue) { return; } const nextSelected = refValue.selector(nextValue); if (isShadowEqual(refValue.selected, nextSelected)) { return; } } catch (e) { // ignore } forceUpdate(); }listeners.add(listener); return () => { listeners.delete(listener); }; }, []); return selected; }

有了 selector。最后一步，我们来改写 Provider

// createContainer 函数中const Provider: React.FC<{ initialState?: State }> = ({ initialState, children }) => { const value = https://www.it610.com/article/useHook(initialState); // 使用 Ref，让 listener Context 不具备触发更新 const listeners = React.useRef void>>(new Set()).current; // 每次 useHook 里面 setState 就会让本组件更新，使 listeners 触发调用，从而使改变状态的子组件 render listeners.forEach((listener) => { listener(value); }); return ( {children} ); };

大功告成！useSelector 返回的新对象都会如同 React.memo 一样做浅对比。API 用法也如同 React-Redux，毫无学习成本。我们来看看用法

function CardBody() { // count 一旦变化后，本组件触发 rerender // 这里如果嫌麻烦，可以使用 lodash 中的 pick 函数 const store = BaseStore.useSelector(({ count, increment }) => ({ count, increment })); return Text {store.count}; }

值得注意的是，createContainer 函数中返回出去的值不能是每次 render 都重新生成的。我们来修改一下 BaseStore

export const BaseStore = createContainer(() => { // 定义状态 const [count, setCount] = React.useState(0); // 之前定义的两个 function 替换为 useMethods 包裹，保证 increment 、decrement 函数引用不变 const methods = useMethods({ increment() { setCount(count + 1); }, decrement() { setCount(count - 1); }, }); return { count, setCount, ...methods, }; });

这里的 useMethods Hook 就是我之前有篇文章分析过的，用来代替 useCallback，源码见 Heo。
锦上添花，可以将 useSelector 结合 lodash.picker 封装一个更常用的 API，取个名字叫 usePicker

// createContainer 函数中function usePicker(selected: Selected[]): Pick { return useSelector((state) => pick(state as Required, selected)); }

试试效果：

function CardBody() { const store = BaseStore.usePicker(['count', 'increment']); return Text {store.count}; }

总结
好了，这就是我当时写一个状态管理的思路，你学会了吗？源码见 Heo，也是我们正在用的状态管理，它足够轻量、配合 Hooks、完美支持 TS、改造原有代码的难度小。目前已在生产环境中稳定运行了一年多了，最高复杂度的项目为一次性渲染 2000 多个递归结构的组件，性能依然保持得很优秀。欢迎大家 Star。
欢迎关注微信公众号 前端星辰，后续会为大家送上各种组件的实现思路。