javascript - receive - reactjs component state

¿Qué sucede al usar this.setState varias veces en el componente React?

Question

Quería verificar qué sucede cuando usas this.setState varias veces (2 veces por el bien de la discusión). Pensé que el componente se representará dos veces, pero aparentemente solo se representa una vez. Otra expectativa que tuve fue que tal vez la segunda llamada para setState se ejecutará sobre la primera, pero lo adivinaste, funcionó bien.

Enlace a un 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'')
);

Como verá, aparece una alerta que dice ''render'' en cada render.

¿Tiene una explicación de por qué funcionó correctamente?

Answer 1

El método setState () no actualiza inmediatamente el estado del componente, simplemente coloca la actualización en una cola para procesarla más tarde. React puede agrupar varias solicitudes de actualización para hacer que la representación sea más eficiente. Debido a esto, se deben tomar precauciones especiales cuando intente actualizar el estado según el estado anterior del componente.

Por ejemplo, el siguiente código solo incrementará el atributo del valor de estado en 1 aunque se lo llame 4 veces:

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

Para usar un estado después de que se haya actualizado, realice toda la lógica en el argumento de devolución de llamada:

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

El método setState (Updater, [callback]) puede tomar una función de actualización como primer argumento para actualizar el estado en función del estado y las propiedades anteriores. El valor de retorno de la función de actualización se fusionará superficialmente con el estado del componente anterior. El método actualiza el estado de forma asincrónica, por lo que hay una opción de devolución de llamada que se llamará una vez que el estado haya terminado de actualizarse por completo.

Ejemplo:

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

Aquí hay un ejemplo de cómo actualizar el estado según el estado anterior:

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

Answer 2

Reaccione las actualizaciones de estado de los lotes que se producen en los controladores de eventos y los métodos del ciclo de vida. Por lo tanto, si actualiza el estado varias veces en un controlador <div onClick /> , React esperará a que finalice el manejo de eventos antes de volver a renderizar.

Para ser claros, esto solo funciona en controladores de eventos sintéticos controlados por React y métodos de ciclo de vida. Las actualizaciones de estado no se agrupan en AJAX y setTimeout eventos setTimeout , por ejemplo.