基于 React Hook 封装 Store 的三种方案

基于 React Hook 封装 Store 的三种方案

方案一：基于 useSyncExternalStore 的轻量级 Store（推荐）

import { useSyncExternalStore } from 'react';type Store<T> = {state: T;listeners: Set<() => void>;
};function createStore<T>(initialState: T) {const store: Store<T> = {state: initialState,listeners: new Set(),};const setState = (updater: (prev: T) => T) => {store.state = updater(store.state);store.listeners.forEach(listener => listener());};const subscribe = (listener: () => void) => {store.listeners.add(listener);return () => store.listeners.delete(listener);};const useStore = <S>(selector: (state: T) => S): S => {return useSyncExternalStore(subscribe,() => selector(store.state),() => selector(initialState));};return [useStore, setState] as const;
}

特性：零依赖、无 Provider、精准渲染

方案二：基于 Context + useReducer

import { createContext, useContext, useReducer } from 'react';type State = { count: number };
type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };const StoreContext = createContext<{state: State;dispatch: React.Dispatch<Action>;
}>(null!);function StoreProvider({ children }) {const [state, dispatch] = useReducer((prev: State, action: Action) => {switch (action.type) {case 'INCREMENT': return { ...prev, count: prev.count + 1 };case 'DECREMENT': return { ...prev, count: prev.count - 1 };default: return prev;}},{ count: 0 });return (<StoreContext.Provider value={{ state, dispatch }}>{children}</StoreContext.Provider>);
}function useStore() {const { state, dispatch } = useContext(StoreContext);return {count: state.count,increment: () => dispatch({ type: 'INCREMENT' }),decrement: () => dispatch({ type: 'DECREMENT' })};
}

优势：支持中间件、复杂状态管理

方案三：基于闭包的轻量实现

import { useState, useMemo } from 'react';function createStore<T>(initialState: T) {let state = initialState;const listeners = new Set<() => void>();const setState = (updater: (prev: T) => T) => {state = updater(state);listeners.forEach(listener => listener());};function useStore(): [T, typeof setState] {const [, forceUpdate] = useState({});useMemo(() => {listeners.add(forceUpdate);return () => { listeners.delete(forceUpdate); };}, []);return [state, setState];}return useStore;
}

特点：<20行代码实现

方案选型对比