您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何實現(xiàn)基于React Hooks的狀態(tài)共享,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
React 組件間的狀態(tài)共享,是一個老生常談的問題,也有很多解決方案,例如 Redux、MobX 等。這些方案很專業(yè),也經(jīng)歷了時間的考驗,但私以為他們不太適合一些不算復(fù)雜的項目,反而會引入一些額外的復(fù)雜度。
實際上很多時候,我不想定義 mutation 和 action、我不想套一層 context,更不想寫 connect 和 mapStateToProps;我想要的是一種輕量、簡單的狀態(tài)共享方案,簡簡單單引用、簡簡單單使用。
隨著 Hooks 的誕生、流行,我的想法得以如愿。
接著介紹一下我目前在用的方案,將 Hooks 與發(fā)布/訂閱模式結(jié)合,就能實現(xiàn)一種簡單、實用的狀態(tài)共享方案。因為代碼不多,下面將給出完整的實現(xiàn)。
import { Dispatch, SetStateAction, useCallback, useEffect, useReducer, useRef, useState, } from 'react'; /** * @see https://github.com/facebook/react/blob/bb88ce95a87934a655ef842af776c164391131ac/packages/shared/objectIs.js * inlined Object.is polyfill to avoid requiring consumers ship their own * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is */ function is(x: any, y: any): boolean { return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y); } const objectIs = typeof Object.is === 'function' ? Object.is : is; /** * @see https://github.com/facebook/react/blob/933880b4544a83ce54c8a47f348effe725a58843/packages/shared/shallowEqual.js * Performs equality by iterating through keys on an object and returning false * when any key has values which are not strictly equal between the arguments. * Returns true when the values of all keys are strictly equal. */ function shallowEqual(objA: any, objB: any): boolean { if (is(objA, objB)) { return true; } if ( typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null ) { return false; } const keysA = Object.keys(objA); const keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } // Test for A's keys different from B. for (let i = 0; i < keysA.length; i++) { if ( !Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]]) ) { return false; } } return true; } const useForceUpdate = () => useReducer(() => ({}), {})[1] as VoidFunction; type ISubscriber<T> = (prevState: T, nextState: T) => void; export interface ISharedState<T> { /** 靜態(tài)方式獲取數(shù)據(jù), 適合在非組件中或者數(shù)據(jù)無綁定視圖的情況下使用 */ get: () => T; /** 修改數(shù)據(jù),賦予新值 */ set: Dispatch<SetStateAction<T>>; /** (淺)合并更新數(shù)據(jù) */ update: Dispatch<Partial<T>>; /** hooks方式獲取數(shù)據(jù), 適合在組件中使用, 數(shù)據(jù)變更時會自動重渲染該組件 */ use: () => T; /** 訂閱數(shù)據(jù)的變更 */ subscribe: (cb: ISubscriber<T>) => () => void; /** 取消訂閱數(shù)據(jù)的變更 */ unsubscribe: (cb: ISubscriber<T>) => void; /** 篩出部分 state */ usePick<R>(picker: (state: T) => R, deps?: readonly any[]): R; } export type IReadonlyState<T> = Omit<ISharedState<T>, 'set' | 'update'>; /** * 創(chuàng)建不同實例之間可以共享的狀態(tài) * @param initialState 初始數(shù)據(jù) */ export const createSharedState = <T>(initialState: T): ISharedState<T> => { let state = initialState; const subscribers: ISubscriber<T>[] = []; // 訂閱 state 的變化 const subscribe = (subscriber: ISubscriber<T>) => { subscribers.push(subscriber); return () => unsubscribe(subscriber); }; // 取消訂閱 state 的變化 const unsubscribe = (subscriber: ISubscriber<T>) => { const index = subscribers.indexOf(subscriber); index > -1 && subscribers.splice(index, 1); }; // 獲取當(dāng)前最新的 state const get = () => state; // 變更 state const set = (next: SetStateAction<T>) => { const prevState = state; // @ts-ignore const nextState = typeof next === 'function' ? next(prevState) : next; if (objectIs(state, nextState)) { return; } state = nextState; subscribers.forEach((cb) => cb(prevState, state)); }; // 獲取當(dāng)前最新的 state 的 hooks 用法 const use = () => { const forceUpdate = useForceUpdate(); useEffect(() => { let isMounted = true; // 組件掛載后立即更新一次, 避免無法使用到第一次更新數(shù)據(jù) forceUpdate(); const un = subscribe(() => { if (!isMounted) return; forceUpdate(); }); return () => { un(); isMounted = false; }; }, []); return state; }; const usePick = <R>(picker: (s: T) => R, deps = []) => { const ref = useRef<any>({}); ref.current.picker = picker; const [pickedState, setPickedState] = useState<R>(() => ref.current.picker(state), ); ref.current.oldState = pickedState; const sub = useCallback(() => { const pickedOld = ref.current.oldState; const pickedNew = ref.current.picker(state); if (!shallowEqual(pickedOld, pickedNew)) { // 避免 pickedNew 是一個 function setPickedState(() => pickedNew); } }, []); useEffect(() => { const un = subscribe(sub); return un; }, []); useEffect(() => { sub(); }, [...deps]); return pickedState; }; return { get, set, update: (input: Partial<T>) => { set((pre) => ({ ...pre, ...input, })); }, use, subscribe, unsubscribe, usePick, }; };
擁有 createSharedState 之后,下一步就能輕易地創(chuàng)建出一個可共享的狀態(tài)了,在組件中使用的方式也很直接。
// 創(chuàng)建一個狀態(tài)實例 const countState = createSharedState(0); const A = () => { // 在組件中使用 hooks 方式獲取響應(yīng)式數(shù)據(jù) const count = countState.use(); return <div>A: {count}</div>; }; const B = () => { // 使用 set 方法修改數(shù)據(jù) return <button onClick={() => countState.set(count + 1)}>Add</button>; }; const C = () => { return ( <button onClick={() => { // 使用 get 方法獲取數(shù)據(jù) console.log(countState.get()); }} > Get </button> ); }; const App = () => { return ( <> <A /> <B /> <C /> </> ); };
對于復(fù)雜對象,還提供了一種方式,用于在組件中監(jiān)聽指定部分的數(shù)據(jù)變化,避免其他字段變更造成多余的 render:
const complexState = createSharedState({ a: 0, b: { c: 0, }, }); const A = () => { const a = complexState.usePick((state) => state.a); return <div>A: {a}</div>; };
但復(fù)雜對象一般更建議使用組合派生的方式,由多個簡單的狀態(tài)派生出一個復(fù)雜的對象。另外在有些時候,我們會需要一種基于原數(shù)據(jù)的計算結(jié)果,所以這里同時提供了一種派生數(shù)據(jù)的方式。
通過顯示聲明依賴的方式監(jiān)聽數(shù)據(jù)源,再傳入計算函數(shù),那么就能得到一個響應(yīng)式的派生結(jié)果了。
/** * 狀態(tài)派生(或 computed) * ```ts * const count1 = createSharedState(1); * const count2 = createSharedState(2); * const count3 = createDerivedState([count1, count2], ([n1, n2]) => n1 + n2); * ``` * @param stores * @param fn * @param initialValue * @returns */ export function createDerivedState<T = any>( stores: IReadonlyState<any>[], fn: (values: any[]) => T, opts?: { /** * 是否同步響應(yīng) * @default false */ sync?: boolean; }, ): IReadonlyState<T> & { stop: () => void; } { const { sync } = { sync: false, ...opts }; let values: any[] = stores.map((it) => it.get()); const innerModel = createSharedState<T>(fn(values)); let promise: Promise<void> | null = null; const uns = stores.map((it, i) => { return it.subscribe((_old, newValue) => { values[i] = newValue; if (sync) { innerModel.set(() => fn(values)); return; } // 異步更新 promise = promise || Promise.resolve().then(() => { innerModel.set(() => fn(values)); promise = null; }); }); }); return { get: innerModel.get, use: innerModel.use, subscribe: innerModel.subscribe, unsubscribe: innerModel.unsubscribe, usePick: innerModel.usePick, stop: () => { uns.forEach((un) => un()); }, }; }
至此,基于 Hooks 的狀態(tài)共享方的實現(xiàn)介紹就結(jié)束了。
在最近的項目中,有需要狀態(tài)共享的場景,我都選擇了上述方式,在 Web 項目和小程序 Taro 項目中均能使用同一套實現(xiàn),一直都比較順利。
最后總結(jié)一下目前這種方式的幾個特點:
1.實現(xiàn)簡單,不引入其他概念,僅在 Hooks 的基礎(chǔ)上結(jié)合發(fā)布/訂閱模式,類 React 的場景都能使用,比如 Taro;
2.使用簡單,因為沒有其他概念,直接調(diào)用 create 方法即可得到 state 的引用,調(diào)用 state 實例上的 use 方法即完成了組件和數(shù)據(jù)的綁定;
3.類型友好,創(chuàng)建 state 時無需定義多余的類型,使用的時候也能較好地自動推導(dǎo)出類型;
4.避免了 Hooks 的“閉包陷阱”,因為 state 的引用是恒定的,通過 state 的 get 方法總是能獲取到最新的值:
const countState = createSharedState(0); const App = () => { useEffect(() => { setInterval(() => { console.log(countState.get()); }, 1000); }, []); // return ... };
5.直接支持在多個 React 應(yīng)用之間共享,在使用一些彈框的時候是比較容易出現(xiàn)多個 React 應(yīng)用的場景:
const countState = createSharedState(0); const Content = () => { const count = countState.use(); return <div>{count}</div>; }; const A = () => ( <button onClick={() => { Dialog.info({ title: 'Alert', content: <Content />, }); }} > open </button> );
6.支持在組件外的場景獲取/更新數(shù)據(jù)
7.在 SSR 的場景有較大局限性:state 是細(xì)碎、分散創(chuàng)建的,而且 state 的生命周期不是跟隨 React 應(yīng)用,導(dǎo)致無法用同構(gòu)的方式編寫 SSR 應(yīng)用代碼
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何實現(xiàn)基于React Hooks的狀態(tài)共享”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。