核心實現原理 ：
全局狀態容器：維護單一狀態源
訂閱機制：組件訂閱狀態變化
狀態更新調度：通過 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>)
}