Múltiples setStates no se acumulan en una actualización / renderización ...?
Recuerdo lo sorprendida que estaba cuando descubrí quesetState
era asíncrono. Ahora me topé con un comportamiento "extraño" que no encaja en mi comprensión desetState
asincronía.
Considere un fragmento a continuación (por alguna razón resulta enScript Error
, aquí está la caja de arena externa:https: //codesandbox.io/s/zwrvkz74y):
class SomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
prop1: 1,
prop2: 2
};
setTimeout(this.changeProp1.bind(this), 100);
}
componentDidUpdate() {
console.info("componentDidUpdate called");
}
changeProp1() {
this.setState({ prop1: 2 });
this.changeProp2();
}
changeProp2() {
this.setState({ prop2: 3 });
}
render() {
const { prop1, prop2 } = this.state;
return React.createElement('div', null, `prop1: ${prop1}, prop2: ${prop2}`);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(React.createElement(SomeComponent), rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Si ejecuta esto y comprueba la consola, verá quecomponentDidUpdate
fue invocado dos veces, pero no deberíasetStates
acumular y actualizar el componente solo una vez?
ACTUALIZA: Creo que mi confusión proviene de esta frase en elas actualizaciones de @State pueden ser asincrónicas sección en el sitio web de ReactJS:
React puede agrupar múltiples llamadas setState () en una única actualización para el rendimiento.