React
Zustand in Reaktion

Grundzustand

Status in React-Komponenten ist für die Verwaltung und Kommunikation von Daten in Ihrer Anwendung unerlässlich. Es wird als JavaScript - Objekt dargestellt und hat Komponentenebene Umfang, kann es als die privaten Daten Ihrer Komponente gedacht werden.

Im folgenden Beispiel definieren wir einen Anfangszustand in der constructor unserer Komponente und verwenden diesen in der render .

class ExampleComponent extends React.Component {
  constructor(props){
    super(props);

    // Set-up our initial state
    this.state = {
      greeting: 'Hiya Buddy!'
    };
  }

  render() {
    // We can access the greeting property through this.state
    return(
      <div>{this.state.greeting}</div>
    );
  }
}

setState ()

Die setState() , mit der Sie Aktualisierungen der Benutzeroberfläche für Ihre React-Anwendungen vornehmen, ist der Aufruf der Funktion setState() . Diese Funktion führt eine flache Verschmelzung zwischen dem von Ihnen angegebenen neuen Status und dem vorherigen Status durch und löst ein erneutes Rendern Ihrer Komponente und aller Dekadenten aus.

Parameter

1. updater : Es kann sich um ein Objekt mit einer Reihe von Schlüssel-Wert-Paaren handeln, die mit dem Status zusammengeführt werden sollten, oder eine Funktion, die ein solches Objekt zurückgibt.
2. callback (optional) : Eine Funktion, die ausgeführt wird, nachdem setState() erfolgreich ausgeführt wurde. Aufgrund der Tatsache, dass Aufrufe von setState() von React nicht als atomar garantiert werden, kann dies manchmal nützlich sein, wenn Sie eine Aktion ausführen möchten, nachdem Sie sich setState() sind, dass setState() erfolgreich ausgeführt wurde.

Verwendungszweck:

Die setState Methode akzeptiert ein updater Argument, bei dem es sich entweder um ein Objekt mit einer Anzahl von Schlüssel-Wert-Paaren handeln kann, das in den Status prevState werden soll, oder um eine Funktion, die ein solches Objekt prevState aus prevState und props berechnet wurde.

setState() mit einem Objekt als updater

//
// An example ES6 style component, updating the state on a simple button click.
// Also demonstrates where the state can be set directly and where setState should be used.
//
class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.click = this.click.bind(this);
        // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
        this.state = {
            greeting: 'Hello!'
        };
    }
    click(e) {
        this.setState({
              greeting: 'Hello World!'
        });
    }
    render() {
        return(
            <div>
                <p>{this.state.greeting}</p>
                <button onClick={this.click}>Click me</button>
            </div>
        );
    }
    
}

setState() mit einer Funktion als updater

//
// This is most often used when you want to check or make use 
// of previous state before updating any values.
//

this.setState(function(previousState, currentProps) {
  return {
    counter: previousState.counter + 1
  };
});

Dies kann sicherer sein als die Verwendung eines Objektarguments, bei dem mehrere Aufrufe von setState() verwendet werden, da mehrere Aufrufe von React zusammengestellt und gleichzeitig ausgeführt werden können. Dies ist der bevorzugte Ansatz bei der Verwendung aktueller Requisiten, um den Status festzulegen.

this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });

Diese Aufrufe können von React mithilfe von Object.assign() , wodurch der Zähler um 1 statt um 3 erhöht wird.

Der funktionale Ansatz kann auch verwendet werden, um die Logik zur Einstellung von Zuständen außerhalb von Komponenten zu verschieben. Dies ermöglicht die Isolierung und Wiederverwendung der Zustandslogik.

// Outside of component class, potentially in another file/module

function incrementCounter(previousState, currentProps) {
    return {
        counter: previousState.counter + 1
    };
}

// Within component

this.setState(incrementCounter);

Aufruf von setState() mit einem Object und einer Callback-Funktion

//
// 'Hi There' will be logged to the console after setState completes
//

this.setState({ name: 'John Doe' }, console.log('Hi there'));

Gemeinsames Antipattern

Sie sollten props im state speichern. Es gilt als Anti-Muster . Zum Beispiel:

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            url: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            url: this.props.url + '/days=?' + e.target.value
        });
    }

    componentWillMount() {
        this.setState({url: this.props.url});
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.state.url}
            </div>
        )
    }
}

Die Prop- url wird im state gespeichert und dann geändert. Speichern Sie stattdessen die Änderungen in einem Status und erstellen Sie dann den vollständigen Pfad mit state und props :

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            days: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            days: e.target.value
        });
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.props.url + '/days?=' + this.state.days}
            </div>
        )
    }
}

Dies liegt daran, dass wir in einer React-Anwendung eine einzige Quelle der Wahrheit haben möchten - dh für alle Daten sind nur eine Komponente und nur eine Komponente verantwortlich. Es liegt in der Verantwortung dieser Komponente, die Daten in ihrem Status zu speichern und sie über Requisiten an andere Komponenten zu verteilen.

Im ersten Beispiel behalten sowohl die MyComponent-Klasse als auch ihre übergeordnete Klasse 'url' in ihrem Status bei. Wenn wir state.url in MyComponent aktualisieren, werden diese Änderungen nicht im übergeordneten Element angezeigt. Wir haben unsere einzige Quelle der Wahrheit verloren, und es wird immer schwieriger, den Datenfluss durch unsere Anwendung zu verfolgen. Im Vergleich zum zweiten Beispiel - url wird nur im Zustand der übergeordneten Komponente beibehalten und in MyComponent als Requisite verwendet - behalten wir daher eine einzige Wahrheitsquelle bei.

Status, Ereignisse und verwaltete Steuerelemente

Hier ist ein Beispiel einer React-Komponente mit einem "verwalteten" Eingabefeld. Wenn sich der Wert des Eingabefelds ändert, wird ein Event-Handler aufgerufen, der den Status der Komponente mit dem neuen Wert des Eingabefelds aktualisiert. Der Aufruf von setState im Event-Handler löst einen Aufruf aus, render die Komponente im Dom zu aktualisieren.

import React from 'react';
import {render} from 'react-dom';


class ManagedControlDemo extends React.Component {

  constructor(props){
    super(props);
    this.state = {message: ""};
  }

  handleChange(e){
    this.setState({message: e.target.value});
  }

  render() {
    return (
      <div>
        <legend>Type something here</legend>
          <input 
            onChange={this.handleChange.bind(this)} 
            value={this.state.message} 
            autoFocus />
        <h1>{this.state.message}</h1>
      </div>
   );
  } 
}


render(<ManagedControlDemo/>, document.querySelector('#app'));

Es ist sehr wichtig, das Laufzeitverhalten zu beachten. Jedes Mal, wenn ein Benutzer den Wert im Eingabefeld ändert

• handleChange wird aufgerufen und so
• setState wird aufgerufen und so
• render wird aufgerufen

Pop-Quiz, nachdem Sie ein Zeichen in das Eingabefeld eingegeben haben, dessen DOM-Elemente geändert werden

1. all dies - das div der obersten Ebene, die Legende, die Eingabe, h1
2. nur die eingabe und h1
3. nichts
4. was ist ein DOM?

Sie können hier mehr experimentieren, um die Antwort zu finden