Was passiert, wenn this.setState in der React-Komponente mehrmals verwendet wird?

Ich wollte überprüfen, was passiert, wenn Sie this.setState mehrmals verwenden (2 Mal für die Diskussion). Ich dachte, dass die Komponente zweimal gerendert wird, aber anscheinend wird sie nur einmal gerendert. Eine andere Erwartung, die ich hatte, war, dass vielleicht der zweite Aufruf von setState über den ersten läuft, aber Sie haben es erraten - es hat gut funktioniert.

Link zu einer JSfiddle

var Hello = React.createClass({
  render: function() {
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <CheckBox />
      </div>
    );
  }
});

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      alex: 0
    };
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
    this.setState({
      alex: 5
    });
  },

  render: function() {
    alert('render');
    return (
      <div>
        <label htmlFor="alex">Alex</label>
        <input type="checkbox" onChange={this.handleChange} name="alex" />
        <div>{this.state.alex}</div>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Wie Sie sehen werden, wird bei jedem Rendern eine Warnung mit der Aufschrift "Rendern" angezeigt.

Haben Sie eine Erklärung, warum es richtig funktioniert hat?

Reagieren Sie auf Statusaktualisierungen von Stapeln, die in Ereignishandlern und Lebenszyklusmethoden auftreten. Wenn Sie den Status in einem <div onClick />Handler mehrmals aktualisieren , wartet React vor dem erneuten Rendern, bis die Ereignisbehandlung abgeschlossen ist.

Dies funktioniert nur in reaktionsgesteuerten synthetischen Ereignishandlern und Lebenszyklusmethoden. Statusaktualisierungen werden beispielsweise in AJAX- und setTimeoutEreignishandlern nicht gestapelt .

Die setState () -Methode aktualisiert den Status der Komponente nicht sofort, sondern stellt die Aktualisierung lediglich in eine Warteschlange, um sie später zu verarbeiten. React kann mehrere Aktualisierungsanforderungen stapeln, um das Rendern effizienter zu gestalten. Aus diesem Grund müssen besondere Vorsichtsmaßnahmen getroffen werden, wenn Sie versuchen, den Status basierend auf dem vorherigen Status der Komponente zu aktualisieren.

Der folgende Code erhöht beispielsweise das Statuswertattribut nur um 1, obwohl es viermal aufgerufen wurde:

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

Um einen Status nach seiner Aktualisierung zu verwenden, führen Sie die gesamte Logik im Rückrufargument aus:

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

Die Methode setState (updater, [callback]) kann eine Updater-Funktion als erstes Argument verwenden, um den Status basierend auf dem vorherigen Status und den vorherigen Eigenschaften zu aktualisieren. Der Rückgabewert der Updater-Funktion wird flach mit dem vorherigen Komponentenstatus zusammengeführt. Die Methode aktualisiert den Status asynchron, sodass es einen Optionsrückruf gibt, der aufgerufen wird, sobald der Status vollständig aktualisiert wurde.

Beispiel:

this.setState((prevState, props) => { 
return {attribute:"value"}
})

Hier ist ein Beispiel für das Aktualisieren des Status basierend auf dem vorherigen Status:

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }