我想检查一下当您多次使用this.setState时发生了什么(为了讨论而两次)。我认为该组件将被渲染两次,但显然它仅被渲染一次。我的另一个期望是,对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') );
如您所见,每个渲染器上都会弹出一个警告,提示“渲染器”。
您是否对其正常工作有解释?
React批处理状态更新发生在事件处理程序和生命周期方法中。因此,如果您在<div onClick />处理程序中多次更新状态,React将在重新渲染之前等待事件处理完成。
<div onClick />
需要明确的是,这仅适用于React控制的综合事件处理程序和生命周期方法。例如,状态更新不在AJAX和setTimeout事件处理程序中批处理。
setTimeout