Berkongsi keadaan antara komponen React yang tidak berkaitan

Ingin menunjukkan cara anda boleh berkongsi sebarang data boleh bersiri antara komponen React, mis. komponen pelanggan dalam NextJS.

Kami mempunyai beberapa komponen yang tidak berkaitan:

Mari kita cipta objek yang akan mengandungi keadaan awal

export const state: { count: number } = { count: 0 };

Kami boleh menyimpan data dalam Peta atau WeakMap, keadaan akan menjadi kunci untuk mengaksesnya. Juga, akan memerlukan susunan pelanggan.

const stateMap = new WeakMap<object, object>();
const subscribers: (() => void)[] = [];

Sekarang mari kita tulis cangkuk untuk melanggan perubahan data.

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);
    };
  }, []);
}

Sekarang mari tambah logik yang berkaitan untuk mendapatkan dan menetapkan keadaan

  // 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 };

Dan kini boleh menggunakannya dalam 3 komponen seperti

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>

Anda boleh melihat cara ia berfungsi di sini https://stackblitz.com/~/github.com/asmyshlyaev177/react-common-state-example
Atau di sini https://codesandbox.io/p/github/asmyshlyaev177/react-common-state-example/main
Atau dalam github https://github.com/asmyshlyaev177/react-common-state-example

Lihat perpustakaan saya untuk NextJS berdasarkan prinsip ini https://github.com/asmyshlyaev177/state-in-url

Tnx kerana membaca.

Atas ialah kandungan terperinci Berkongsi keadaan antara komponen React yang tidak berkaitan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!