在 React 组件中多次使用 this.setState 时会发生什么?
2022-08-30 04:33:51
我想检查当你多次使用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')
);
如您所见,每次渲染都会弹出一个提示“渲染”。。.
你有解释为什么它能正常工作吗?