React -Anwendungen beruhen auf den Status, um Anwendungsdaten zu verfolgen. Der Status ?ndert sich bei der Benutzerinteraktion. Wenn sich der Status ?ndert, müssen wir den von der Benutzeroberfl?che angezeigten Status aktualisieren, der normalerweise mit der setState -Methode von React implementiert wird.

Da Reacts Staat unver?nderlich ist (kann nicht direkt modifiziert werden), wenn der Staat komplex wird, wird die Aktualisierung des Staates sehr schwierig und schwer zu verstehen und zu warten.

Hier kommt Immer ins Spiel. In diesem Artikel wird untersucht, wie das React -Statusmanagement mithilfe von Immer vereinfacht wird. Immer verwendet das Konzept von "Entwurf" (Entwurf), das Sie als Kopie des Staates verstehen k?nnen, nicht als Staat selbst. Sie k?nnen sich vorstellen, dass Immer eine Kopieroperation im Zustand durchführt und diese dann an einem sicheren Ort modifiziert, ohne den ursprünglichen Zustand zu beeinflussen. Alle Updates werden auf dem Entwurf durchgeführt, und nur die ge?nderten Teile im Entwurf werden im tats?chlichen Zustand aktualisiert.

Zum Beispiel lautet Ihr Anwendungsstatus wie folgt:

 this.state = {
  Name: 'Kunle',
  Alter: 30,,
  Stadt: 'Lagos',
  Land: 'Nigeria'
}

Wenn der Benutzer seinen 31. Geburtstag feiert, müssen wir den Wert des age aktualisieren. Mithilfe von Immer wird eine staatliche Kopie (Entwurf) erstellt.

Stellen Sie sich vor, diese Kopie wird an einen Boten übergeben, der die Kopie an Kunle übergab. Es gibt jetzt zwei Repliken: den aktuellen Zustand und den Entwurf, der Kunle überreicht wurde. Kunle modifizierte age im Entwurf auf 31. Der Messenger gibt dann den ge?nderten Entwurf in die App zurück, die App vergleicht die beiden Versionen und aktualisiert age nur, da dies der einzige Teil des Entwurfs ist, der sich ge?ndert hat.

Diese Methode bricht nicht das Prinzip unver?nderlicher Zust?nde, da der aktuelle Zustand nicht direkt ge?ndert wird. Immer vereinfacht das Management unver?nderlicher Zust?nde.

Praktisches Beispiel: Ampeln

Lassen Sie uns eine einfache Ampelanwendung mit Immer erstellen.

Mithilfe von Immer ist der Komponentencode wie folgt:

 const {produzieren} = Immer;

Die Klassen -App erweitert React.comPonent {
  state = {
    rot: 'rot', 
    Gelb: 'Schwarz', 
    grün: 'schwarz',
    Weiter: "Gelb"
  };

  componentDidmount () {
    this.interval = setInterval (() => this.changeHandle (), 3000);
  }

  componentwillunmount () {
    ClearInterval (this.interval);
  }

  Handleredlight = () => {
    this.setState (
      produzieren (draf => {
        Draft.red = 'rot';
        Draft.yellow = 'schwarz';
        entwurf.green = 'schwarz';
        Draft.Next = 'Yellow';
      })
    );
  };

  handlewelllight = () => {
    this.setState (
      produzieren (draf => {
        Draft.red = 'schwarz';
        Draft.yellow = 'gelb';
        entwurf.green = 'schwarz';
        Draft.Next = 'Green';
      })
    );
  };

  Getriebellicht = () => {
    this.setState (
      produzieren (draf => {
        Draft.red = 'schwarz';
        Draft.yellow = 'schwarz';
        Draft.green = 'Green';
        Draft.Next = 'rot';
      })
    );
  };

  ChangeHandle = () => {
    if (this.state.next === 'gelb') {
      this.Handley ();
    } else if (this.state.next === 'green') {
      this.handlegreenlight ();
    } anders {
      this.Handleredlight ();
    }
  };

  render () {
    Zurückkehren (
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    );
  }
}

produce ist die Standardfunktion von Immer. Wir übergeben dies als Parameter an setState -Methode. produce Erzeugungsfunktion empf?ngt eine Funktion, die draft als Argument akzeptiert. In dieser Funktion k?nnen wir draft Entwurfskopie ?ndern.

Eine einfachere Art zu schreiben:

 const Handlelight = (Zustand) => {
  Rückgabeprodukte (Zustand, (Entwurf) => {
    Draft.red = 'schwarz';
    Draft.yellow = 'schwarz';
    Draft.green = 'Green';
    Draft.Next = 'rot';
  });
};

// in Komponenten verwenden:
Getriebellicht = () => {
  const NextState = Handlelight (this.state);
  this.setState (NextState);
};

Wir übergeben den aktuellen Status und die Funktion, die draft als Argumente an die produce akzeptiert.

Ein weiteres Beispiel: Einkaufsliste

Wenn Sie React eine Weile verwendet haben, sollten Sie mit dem Spread -Operator vertraut sein. Insbesondere beim Umgang mit Array -Status müssen Sie keine Erweiterungsbetreiber verwenden.

Lassen Sie uns eine Einkaufslisten -App erstellen, um dies weiter zu veranschaulichen.

Komponentencode:

 Die Klassen -App erweitert React.comPonent {
  // ... (Konstruktor und andere Methoden) ...

  Handlesubmit = (e) => {
    E.PreventDefault ();
    const newitem = {
      ID: uUid.v4 (),
      Name: this.state.name,
      Preis: this.state.price
    };
    this.setState (
      produzieren (draf => {
        entworfen.list = drap.list.concat (newItem);
      })
    );
  };

  // ... (Render -Methode) ...
}

Beim Hinzufügen eines neuen Produkts müssen wir den Listenstatus aktualisieren. Verwenden Sie setState und Erweiterungsoperatoren:

 Handlesubmit = (e) => {
  // ...
  this.setState ({list: [... this.state.list, newItem]});
};

Die Verwendung von Erweiterungsbetreibern kann sehr kompliziert werden, wenn mehrere Zust?nde aktualisiert werden müssen. Mit Immer wird dies sehr einfach.

Was ist, wenn wir die Rückruffunktion aufrufen m?chten, nachdem der Status aktualisiert wurde? Zum Beispiel m?chten wir den Gesamtpreis des Artikels in der Liste berechnen.

 Handlesubmit = (e) => {
  // ...
  this.setState (
    produzieren (draf => {
      entworfen.list = drap.list.concat (newItem);
    }), () => {
      this.calculateamount (this.state.list);
    }
  );
};

calculateamount = (list) => {
  Sei Total = 0;
  list.foreach (item => total = item.price);
  this.setState (
    produzieren (draf => {
      Draft.Totalamount = total;
    })
  );
};

Die Rückruffunktion wird aufgerufen, nachdem der Status aktualisiert wurde und der aktualisierte Status verwendet wird.

Immerhaken

use-immer ist ein Haken, mit dem Sie den Status in einer React-Anwendung verwalten k?nnen. Lassen Sie uns mit einem einfachen Z?hlerbeispiel demonstrieren:

 Import reagieren aus "reagieren";
importieren {useImmer} aus "Anwendungsimmer";

const counter = () => {
  const [count, updateCounter] = useummer ({value: 0});

  Funktion increment () {
    updateCounter (draf => {
      Entwurf. Wert;
    });
  }

  Zurückkehren (
    <div>
      <h1>Z?hler {count.Value}</h1>
      <button onclick="{increment}">Inkrement</button>
    </div>
  );
};

Standardschalter exportieren;

useImmer ?hnelt dem useState . Es gibt den Status und eine Aktualisierungsfunktion zurück. Wenn die Komponente geladen wird, ist der Statuswert der für useImmer übergebenen Wert der gleiche. Mit der Funktion der zurückgegebenen Aktualisierung k?nnen wir eine increment erstellen, um den Z?hlerwert zu erh?hen.

Immer bietet auch einen Haken, der dem useReducer ?hnelt: useImmerReducer .

Zusammenfassen

Sie k?nnen Inmer in Ihrem n?chsten Projekt verwenden oder nach und nach auf Ihr aktuelles Projekt anwenden. Es vereinfacht das React State Management. Code -Beispiele finden Sie auf GitHub. (Bitte geben Sie einen GitHub -Link an, wenn er existiert)

Das obige ist der detaillierte Inhalt vonVerwendung von Immer für React State Management. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!