Verwalten des Status in React mithilfe von nicht mehr

Dieser Artikel baut auf einer früheren Diskussion des staatlichen Managements auf, das nicht ununterbrochen und untersucht wurde, und untersucht, dass ein nicht mehr als Nachfolger nicht eingeliefert wird. Unstated-Next nutzt React Hooks und die Kontext-API für optimiertes Zustandsmanagement und bietet einen effizienteren Ansatz als sein Vorgänger, insbesondere angesichts der Fortschritte bei React-Hooks. Wir werden das einzelne und mehrkomponente Staatsmanagement mithilfe von Unstated-Next untersuchen. Die Vertrautheit mit dem vorherigen nicht nicht stationären Artikel ist hilfreich, aber nicht streng erforderlich.

Beispiel für Minimalformkomponenten

Wir erstellen ein einfaches React -Formular mit einer Texteingabe für einen Namen und eine Schaltfläche Senden. Bei der Einreichung wird der Name über dem Formular angezeigt. Der komplette Code ist auf GitHub verfügbar. In diesem Beispiel wird React App und Bootstrap erstellt.

Geben Sie zunächst das Projekt ein:

 NPX erstellen reagiert-app-nicht-Form-Form
CD nicht geschmückt

Installieren Sie nicht mehr als nicht: Next:

 # Garn
Garn addiert nicht mehr

# NPM
NPM Install-Save Unstated-Next

Importieren Sie die erforderlichen Module in App.js :

 // src/app.js
reag import, {usestate} aus 'react';
importieren {createContainer} aus "nicht unaufgeordnetem Next";

Erstellen Sie einen benutzerdefinierten Haken:

 // src/app.js
// ... frühere Importe

const useform = () => {
  const [input, setValue] = usustate ("");
  const [name, setName] = usestate ("Barney Stinson");

  const handelput = (Ereignis) => setValue (Event.Target.Value);
  const UpdateName = (Ereignis) => {
    Event.PreventDefault ();
    setName (Eingabe);
    setValue ("");
  };

  return {input, name, handleInput, updateName};
};

Erstellen Sie einen Container mit createContainer :

 // src/app.js
// ... vorheriger Code

const formcontainer = createContainer (useForm);

Erstellen Sie die Formularkomponente:

 // src/app.js
// ... vorheriger Code

const form = () => {
  const form = formContainer.usecontainer ();
  zurückkehren (
    <div>
      <p>Hallo! {Form.Name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">Speichern</button>
      </form>
    </div>
  );
};

Wickeln Sie die Formularkomponente in die App -Komponente mit dem Anbieter ein:

 const app = () => (
  <formcontainer.provider>
    <form></form>
  </formcontainer.provider>
);

Dadurch wird das Beispiel für minimales Formular abgeschlossen. Versuchen Sie, eine einfache Aufgabenanwendung mit diesen Konzepten zu erstellen. Ein Referenz -Repository ist verfügbar.

State teilen über mehrere Komponenten hinweg

Dieses Beispiel zeigt den Freigabeszustand zwischen einem Formular und einer To-Do-Liste. Der im Formular aktualisierte Name des Benutzers spiegelt die To-Do-Liste wider.

Erstellen Sie ein neues Projekt und installieren Sie Abhängigkeiten:

 NPX erstellen reagiert-applated-next-App
CD Un nicht mehr als app
Garn addiert nicht kurzes Next-Shortid

Erstellen Sie store.js , um den gemeinsamen Zustand zu verwalten:

 // src/store.js
importieren {usestate} aus "react";
Shortid von "Shortid" importieren;
importieren {createContainer} aus 'nicht unaufgefordertem Next';

const usestore = () => {
  const [input, setValue] = usustate ("");
  const [name, setName] = usestate ("Barney Stinson");
  const [todos, settodos] = usestate ([{id: 1, title: 'code'}, {id: 2, title: 'milch'}]);
  const [item, setItem] = usustate ("");

  const handelput = (Ereignis) => setValue (Event.Target.Value);
  const UpdateName = (Ereignis) => {
    Event.PreventDefault ();
    setName (Eingabe);
    setValue ("");
  };
  const handleItem = (Ereignis) => setItem (Ereignis.Target.Value);
  const handlesubmit = (Ereignis) => {
    Event.PreventDefault ();
    Settodos ([... Todos, {id: Shortid.Generate (), Titel: Element}]);
    setItem ("");
  };

  Rückgabe {Eingabe, Name, Handle, UpdateName, Todos, Element, HandleIn, HandleSubmit};
};

Export const StoreContainer = CreateContainer (UsESTORE);

form.js erstellen:

 // src/form.js
Import reagieren aus "reagieren";
importieren {StorEContainer} aus "./store";

const FormComponent = () => {
  const form = StorEContainer.USecontainer ();
  zurückkehren (
    <div>
      <p>Hallo! {Form.Name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">Namen ändern</button>
      </form>
    </div>
  );
};

Standard -StandardComponent exportieren;

Erstellen Sie todo.js :

 // src/todo.js
Import reagieren aus "reagieren";
importieren {StorEContainer} aus "./store";

const todocomponent = () => {
  const todo = StorEContainer.USecontainer ();
  zurückkehren (
    <div>
      <p>Fügen Sie Todos hinzu</p>
      <form onsubmit="{todo.handleSubmit}">
        <input type="text" value="{todo.item}" onchange="{todo.handleItem}">
        <button type="submit">Hinzufügen</button>
      </form>
      <p>Lieber {Todo.name}, hier sind Ihre aktuellen Aufgaben:</p>
      <ul>
        {todo.todos.map ((item) =><li key="{item.id}"> {item.title}</li> )}
      </ul>
    </div>
  );
};

Ausfassungsverwaltungsstudio -Todokomponenten;

App.js aktualisieren:

 Import reagieren aus "reagieren";
Todokomponent von "./Todo" importieren;
FormComponent von "./form" importieren;
importieren {StorEContainer} aus "./store";

Funktion App () {
  zurückkehren (
    <storecontainer.provider>
      <formcomponent></formcomponent>
      <todocomponent></todocomponent>
    </storecontainer.provider>
  );
}

Standard -Standard -App exportieren;

Dieses überarbeitete Beispiel liefert eine vollständigere und funktionale Illustration der staatlichen Freigabe über mehrere Komponenten hinweg unter Verwendung nicht nicht mehr. Denken Sie daran, potenzielle Fehler und Randfälle in einer Produktionsumgebung zu bewältigen.

Das obige ist der detaillierte Inhalt vonVerwalten des Status in React mithilfe von nicht mehr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!