@jayarjo Я обновил свой ответ и добавил ссылку.
ню, как удивился, когда узнал, чтоsetState
был асинхронным Теперь я наткнулся на «странное» поведение, которое не вписывается в мое пониманиеsetState
асинхронность.
Рассмотрим фрагмент ниже (по некоторым причинам это приводит кScript Error
Вот внешняя песочница:https://codesandbox.io/s/zwrvkz74y3):
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>
Если вы запустите это и проверите консоль, вы увидите, чтоcomponentDidUpdate
был вызван дважды, но не долженsetStates
накапливать и обновлять компонент только один раз?
ОБНОВИТЬЯ думаю, что моя путаница происходит от этой фразы вОбновления состояния могут быть асинхронными раздел на сайте ReactJS:
React может объединять несколько вызовов setState () в одно обновление для повышения производительности.