Co się dzieje podczas wielokrotnego używania this.setState w komponencie React?

Chciałem sprawdzić, co się dzieje, gdy używasz this.setState wiele razy (2 razy na potrzeby dyskusji). Myślałem, że komponent zostanie wyrenderowany dwukrotnie, ale najwyraźniej jest renderowany tylko raz. Innym oczekiwaniem było to, że może drugie wywołanie setState przejdzie przez pierwsze, ale zgadłeś - działało dobrze.

Link do 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')
);

Jak zobaczysz, przy każdym renderowaniu pojawia się alert z napisem „renderuj”.

Czy masz wyjaśnienie, dlaczego to działało prawidłowo?

Reaguj aktualizacje stanu partii, które występują w programach obsługi zdarzeń i metodach cyklu życia. Dlatego jeśli wielokrotnie aktualizujesz stan w <div onClick />module obsługi, React będzie czekał na zakończenie obsługi zdarzenia przed ponownym renderowaniem.

Aby było jasne, działa to tylko w kontrolowanych przez React syntetycznych programach obsługi zdarzeń i metodach cyklu życia. Na przykład aktualizacje stanu nie są grupowane w programach AJAX i setTimeoutprogramach obsługi zdarzeń.

Metoda setState () nie aktualizuje natychmiast stanu komponentu, po prostu umieszcza aktualizację w kolejce do przetworzenia później. React może grupować wiele żądań aktualizacji, aby renderowanie było bardziej wydajne. Z tego powodu przy próbie aktualizacji stanu w oparciu o poprzedni stan składnika należy zachować szczególne środki ostrożności.

Na przykład poniższy kod zwiększy atrybut wartości stanu tylko o 1, mimo że został wywołany 4 razy:

 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>
   }
}

Aby użyć stanu po jego aktualizacji, wykonaj całą logikę w argumencie callback:

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

Metoda setState (updater, [callback]) może przyjąć funkcję aktualizującą jako pierwszy argument do aktualizacji stanu na podstawie poprzedniego stanu i właściwości. Wartość zwracana funkcji aktualizującej zostanie płytko scalona z poprzednim stanem komponentu. Metoda aktualizuje stan asynchronicznie, więc istnieje wywołanie zwrotne opcji, które zostanie wywołane po zakończeniu pełnej aktualizacji stanu.

Przykład:

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

Oto przykład, jak zaktualizować stan na podstawie poprzedniego stanu:

    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>
     }
  }