Vous souhaitez montrer comment vous pouvez partager des données sérialisables entre des composants React, par ex. composants clients dans NextJS.
Nous avons quelques composants non liés :
Créons un objet qui contiendra l'état initial
export const state: { count: number } = { count: 0 };
On peut stocker des données dans une Map ou une WeakMap, l'état sera une clé pour y accéder. Il faudra également un tableau d’abonnés.
const stateMap = new WeakMap<object, object>(); const subscribers: (() => void)[] = [];
Écrivons maintenant un hook pour vous abonner aux modifications de données.
export function useCommonState<T extends object>(stateObj: T) { // more efficient than `useEffect` since we don't have any deps React.useInsertionEffect(() => { const cb = () => { const val = stateMap.get(stateObj); _setState(val!); }; // subscribe to events subscribers.push(cb); return () => { subscribers.slice(subscribers.indexOf(cb), 1); }; }, []); }
Ajoutons maintenant la logique liée à l'obtention et à la définition de l'état
// all instances of hook will point to same object reference const [state, _setState] = React.useState<typeof stateObj>(() => { const val = stateMap.get(stateObj) as T; if (!val) { stateMap.set(stateObj, stateObj) return stateObj } return val }); const setState = React.useCallback((newVal: object) => { // update value stateMap.set(stateObj, newVal); // notify all other hook instances subscribers.forEach((sub) => sub()); }, []); return { state, setState };
Et maintenant je peux l'utiliser en 3 composants comme
import { state as myState } from './state'; //... const { state, setState } = useCommonState(myState); <button onClick={() => setState({ count: state.count + 1 })} className="p-2 border" > + </button> // ... Component A<div>Count: {state.count}</div>
Vous pouvez voir comment cela fonctionne ici https://stackblitz.com/~/github.com/asmyshlyaev177/react-common-state-example
Ou ici https://codesandbox.io/p/github/asmyshlyaev177/react-common-state-example/main
Ou sur github https://github.com/asmyshlyaev177/react-common-state-example
Consultez ma bibliothèque pour NextJS basée sur ce principe https://github.com/asmyshlyaev177/state-in-url
Tnx pour la lecture.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!