Der einfachste Weg, gemeinsam genutzte globale Zustände in React mithilfe eines einfachen Atommodells zu erstellen. In diesem Blog finden Sie die Nutzungs- und Implementierungsdetails der Bibliothek.

Verwendung

Erstellen Sie Ihren globalen Status

import { gState } from 'usegstate'

const myGlobalState = gState('hello-world!')

import useGState from 'usegstate'

const YourAwesomeApp = () => {
  const [gState,setGState] = useGState(myGlobalState)
  return (
    <div>{gState}</div>
  )
}

import {GStateProvider} from 'usegstate'

const Wrapper = () => {
  return (
    <GStateProvider>
      <YourAwesomeApp />
    </GStateProvider>
  )
}

Warum nicht die Kontext-API reagieren?

Wie wir wissen, rendert React Context jedes untergeordnete Element erneut, wenn sich der gemeinsame Status in einer untergeordneten Komponente ändert, was in einigen Fällen zu zusätzlichen erneuten Renderings und Leistungsproblemen führt.

Motivation

Ich war schon immer neugierig, wie diese externen zentralen Staatsbibliotheken wie Redux , Jotai usw. funktionieren. Es scheint, als würden sie eine Art Supermacht nutzen, die es ihnen ermöglicht, diese externen zentralen Speicher zu erstellen, die vollständig vom unidirektionalen Fluss von React isoliert sind.

Und nachdem ich ihre umfangreichen Quellcodes durchgesehen hatte, fand ich den Schlüssel. Das Einzige, was mein Reaktionswissen wirklich erweitert.

Schlüsselidee von useGState – Wie es funktioniert.

Die Status-Setter-Funktionen von React wie die Setter-Funktion von useState() oder die Dispatch-Funktion von useReducer() können auf Zustände außerhalb des unidirektionalen Flusses von React zugreifen/diese ändern.

Mit einfachen Worten: Mit dieser Schlüsselidee können wir auf den Reaktionszustand in normalen js-Funktionen zugreifen/ändern. Jetzt können wir mit diesen Funktionen einen externen zentralen globalen Speicher erstellen.

Ruhe, alles ist einfach. Implementieren Sie einfach einen Synchronisierungsmechanismus wie Pub-Sub, um diese globalen Store-Statusänderungen zu abonnieren.

useGState ist ein Bildungspaket, das es Entwicklern ermöglicht, die Reaktion tiefgreifend zu verstehen.

Wenn Sie diese Informationen hilfreich finden, kontaktieren Sie mich auf LinkedIn , um weitere Inhalte dieser Art zu erhalten.