当前位置：首页 > news >正文

react 自定义状态管理库

news 2025/6/19 6:52:57

核心实现原理：
全局状态容器：维护单一状态源
订阅机制：组件订阅状态变化
状态更新调度：通过 Hooks 触发组件重渲染

基础版实现–核心代码

// 1. 创建全局状态存储
const createStore = (initialState) => {let state = initialStateconst listeners = new Set()return {getState: () => state,setState: (newState) => {state = typeof newState === 'function' ? newState(state) : newStatelisteners.forEach(listener => listener()) // 通知所有订阅者},subscribe: (listener) => {listeners.add(listener)return () => listeners.delete(listener) // 返回取消订阅函数}}
}// 2. 创建 React Hook 绑定
const useStore = (store, selector) => {const [state, setState] = useState(() => selector(store.getState()))useEffect(() => {const unsubscribe = store.subscribe(() => {const newState = selector(store.getState())setState(newState) // 只有当选中的状态变化时才更新})return unsubscribe}, [store, selector])return state
}

使用示例

// 创建 store
const counterStore = createStore({ count: 0 })// 在组件中使用
const Counter = () => {const count = useStore(counterStore, state => state.count)return (<div><button onClick={() => counterStore.setState(s => ({ count: s.count - 1 }))}>-</button><span>{count}</span><button onClick={() => counterStore.setState(s => ({ count: s.count + 1 }))}>+</button></div>)
}