Я хотел проверить, что происходит, когда вы используете this.setState несколько раз (2 раза для обсуждения). Я думал, что компонент будет отображаться дважды, но, видимо, он отображается только один раз. Еще одно ожидание: второй вызов setState будет работать над первым, но вы догадались, что он работает нормально.
Ссылка на 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')
);
Как вы увидите, на каждом рендере появляется предупреждение о том, что "render" появляется.
Есть ли у вас объяснение, почему он работал правильно?