Detaillierte Erläuterung der kleinen Zustandsverwaltung basierend auf React Hooks

importieren {
  Versenden,
  SetzeStateAction,
  benutzeCallback,
  Effekt verwenden,
  verwendenReducer,
  verwendenRef,
  verwendenState,
} von „reagieren“;

/**
 * @siehe https://github.com/facebook/react/blob/bb88ce95a87934a655ef842af776c164391131ac/packages/shared/objectIs.js
 * Inline-Object.is-Polyfill, um zu vermeiden, dass Verbraucher ihre eigenen versenden müssen
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
 */
Funktion ist(x: beliebig, y: beliebig): boolean {
  Rückgabewert (x === y und (x !== 0 || 1 / x === 1 / y)) || (x !== x und y !== y);
}

const objectIs = typeof Object.is === 'Funktion'? Object.is: ist;

/**
 * @siehe https://github.com/facebook/react/blob/933880b4544a83ce54c8a47f348effe725a58843/packages/shared/shallowEqual.js
 * Stellt Gleichheit her, indem es durch die Schlüssel eines Objekts iteriert und „false“ zurückgibt
 * wenn ein beliebiger Schlüssel Werte hat, deren Argumente nicht genau gleich sind.
 * Gibt true zurück, wenn die Werte aller Schlüssel genau gleich sind.
 */
Funktion flachEqual(ObjektA: beliebig, ObjektB: beliebig): Boolesch {
  wenn (ist(ObjektA, ObjektB)) {
    gibt true zurück;
  }

  Wenn (
    Typ von ObjektA !== 'Objekt' ||
    objA === null ||
    Typ von ObjektB !== 'Objekt' ||
    objB === null
  ) {
    gibt false zurück;
  }

  const keysA = Objekt.keys(objA);
  const keysB = Objekt.keys(objB);

  wenn (SchlüsselA.Länge !== SchlüsselB.Länge) {
    gibt false zurück;
  }

  // Testen Sie, ob sich die Schlüssel von A von denen von B unterscheiden.
  für (lass i = 0; i < SchlüsselA.Länge; i++) {
    Wenn (
      !Object.prototype.hasOwnProperty.call(objB, SchlüsselA[i]) ||
      !ist(ObjektA[SchlüsselA[i]], ObjektB[SchlüsselA[i]])
    ) {
      gibt false zurück;
    }
  }

  gibt true zurück;
}

const useForceUpdate = () => useReducer(() => ({}), {})[1] als VoidFunction;

Typ ISubscriber<T> = (vorherigerZustand: T, nächsterZustand: T) => void;

Schnittstelle ISharedState<T> exportieren {
  /** Daten statisch abrufen, geeignet für die Verwendung in Nicht-Komponenten oder wenn Daten nicht an eine Ansicht gebunden sind*/
  bekomme: () => T;
  /**Daten ändern und neuen Wert zuweisen*/
  setzen: Dispatch<SetStateAction<T>>;
  /** (Oberflächliche) Merge-Update-Daten*/
  Aktualisierung: Dispatch<Partial<T>>;
  /** Die Hook-Methode ruft Daten ab, die für die Verwendung in Komponenten geeignet sind. Die Komponente wird automatisch neu gerendert, wenn sich die Daten ändern*/
  verwenden: () => T;
  /**Änderungen der Abonnementdaten */
  abonnieren: (cb: ISubscriber<T>) => () => ungültig;
  /** Datenänderungen beim Abbestellen */
  Abbestellen: (cb: ISubscriber<T>) => ungültig;
  /** Einige Zustände herausfiltern */
  usePick<R>(picker: (status: T) => R, deps?: readonly any[]): R;
}

Exporttyp IReadonlyState<T> = Omit<ISharedState<T>, „set“ | „update“>;

/**
 * Erstellen Sie einen Status, der zwischen verschiedenen Instanzen geteilt werden kann * @param initialState Anfangsdaten */
export const createSharedState = <T>(initialState: T): ISharedState<T> => {
  lass Zustand = Anfangszustand;
  const-Abonnenten: ISubscriber<T>[] = [];

  //Statusänderungen abonnieren const subscribe = (subscriber: ISubscriber<T>) => {
    Abonnenten.push(Abonnent);
    return () => abbestellen(Abonnent);
  };

  // Von Statusänderungen abmelden const unsubscribe = (subscriber: ISubscriber<T>) => {
    const index = Abonnenten.indexOf(Abonnent);
    index > -1 und Abonnenten.splice(index, 1);
  };

  // Den neuesten Stand abrufen
  const get = () => Status;

  // Status ändern
  const set = (next: SetStateAction<T>) => {
    const prevState = Status;
    // @ts-ignorieren
    const nextState = typeof next === 'Funktion' ? next(vorherigerState) : nächster;
    wenn (ObjektIst(Zustand, nächsterZustand)) {
      zurückkehren;
    }
    Zustand = nächsterZustand;
    Abonnenten.fürJeden((cb) => cb(vorherigerStatus, Status));
  };

  //Den neuesten Status der Hook-Nutzung abrufen const use = () => {
    const forceUpdate = useForceUpdate();

    useEffect(() => {
      sei isMounted = true;
      // Aktualisieren Sie die Komponente sofort nach der Montage, um zu vermeiden, dass die ersten aktualisierten Daten nicht verwendet werden können. forceUpdate();
      const un = abonnieren(() => {
        wenn (!isMounted) return;
        forceUpdate();
      });
      zurückgeben () => {
        un();
        istMounted = falsch;
      };
    }, []);

    Rückgabezustand;
  };

  const usePick = <R>(picker: (s: T) => R, deps = []) => {
    const ref = useRef<any>({});

    ref.current.picker = Auswahl;

    const [pickedState, setPickedState] = useState<R>(() =>
      ref.current.picker(Status),
    );

    ref.current.oldState = ausgewählter Status;

    const sub = useCallback(() => {
      const pickedOld = ref.current.oldState;
      const pickedNew = ref.current.picker(status);
      wenn (!shallowEqual(pickedOld, pickedNew)) {
        // Vermeiden Sie, dass pickedNew eine Funktion ist
        setPickedState(() => ausgewähltNeu);
      }
    }, []);

    useEffect(() => {
      const un = abonnieren(sub);
      Rückkehr un;
    }, []);

    useEffect(() => {
      unter();
    }, [...deps]);

    gebe selectedState zurück;
  };

  zurückkehren {
    erhalten,
    Satz,
    Aktualisierung: (Eingabe: Partial<T>) => {
      setze((vor) => ({
        ...vor,
        ...Eingang,
      }));
    },
    verwenden,
    abonnieren,
    abbestellen,
    verwendenPick,
  };
};

// Eine Statusinstanz erstellen const countState = createSharedState(0);

const A = () => {
  //Verwenden Sie Hooks in Komponenten, um reaktionsfähige Daten zu erhalten const count = countState.use();
  return <div>A: {Anzahl}</div>;
};

const B = () => {
  //Verwende die Set-Methode, um die Daten zu ändern return <button onClick={() => countState.set(count + 1)}>Add</button>;
};

const C = () => {
  zurückkehren (
    <Schaltfläche
      beiKlick={() => {
        // Verwenden Sie die Get-Methode, um Daten abzurufen console.log(countState.get());
      }}
    >
      Erhalten
    </button>
  );
};

const App = () => {
  zurückkehren (
    <>
      <A />
      <B />
      <C />
    </>
  );
};

const complexState = createSharedState({
  eine: 0,
  B: {
    c: 0,
  },
});

const A = () => {
  const a = complexState.usePick((Zustand) => Zustand.a);
  Rückgabewert <div>A: {a}</div>;
};

/**
 * Zustand abgeleitet (oder berechnet)
 * ```ts
 * const count1 = erstelleSharedState(1);
 * const count2 = erstelleSharedState(2);
 * const count3 = createDerivedState([Anzahl1, Anzahl2], ([n1, n2]) => n1 + n2);
 * ```
 * @param-Läden
 * @param fn
 * @param Anfangswert
 * @returns
 */
Exportfunktion createDerivedState<T = any>(
  speichert: IReadonlyState<any>[],
  fn: (Werte: beliebig[]) => T,
  Optionen?: {
    /**
     * Ob synchron geantwortet werden soll * @default false
     */
    synchronisieren?: Boolesch;
  },
): IReadonlyState<T> & {
  Stopp: () => ungültig;
} {
  const { sync } = { sync: false, ...opts };
  let-Werte: any[] = stores.map((it) => it.get());
  const innerModel = createSharedState<T>(fn(values));

  lass versprechen: Promise<void> | null = null;

  const uns = stores.map((it, i) => {
    returniere es.subscribe((_old, newValue) => {
      Werte[i] = neuerWert;

      wenn (synchronisieren) {
        innerModel.set(() => fn(Werte));
        zurückkehren;
      }

      // Asynchrones Update-Versprechen =
        Versprechen ||
        Versprechen.auflösen().dann(() => {
          innerModel.set(() => fn(Werte));
          Versprechen = null;
        });
    });
  });

  zurückkehren {
    erhalten: innerModel.get,
    verwenden: innerModel.use,
    abonnieren: innerModel.subscribe,
    abbestellen: innerModel.unsubscribe,
    usePick: innerModel.usePick,
    Stopp: () => {
      uns.forEach((un) => un());
    },
  };
}

Konstanten countState = createSharedState(0);

const App = () => {
  useEffect(() => {
    setzeIntervall(() => {
      Konsole.log(countState.get());
    }, 1000);
  }, []);
  // zurückkehren ...
};

const countState = createSharedState(0);

const Inhalt = () => {
  const count = countState.use();
  gibt <div>{Anzahl}</div> zurück;
};

const A = () => (
  <Schaltfläche
    beiKlick={() => {
      Dialog.info({
        Titel: 'Alarm',
        Inhalt: <Inhalt />,
      });
    }}
  >
    offen
  </button>
);