在React组件中多次使用this.setState会发生什么?

JavaScript

卡卡西Mandy

2020-03-12

我想检查一下当您多次使用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')
);

正如您将看到的,在每个渲染上都会弹出一个警告,提示“渲染”。

您是否对其正常运作有解释?

第1210篇《在React组件中多次使用this.setState会发生什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
ASamJim 2020.03.12

React批处理状态更新发生在事件处理程序和生命周期方法中。因此,如果您在<div onClick />处理程序中多次更新状态,React将在重新渲染之前等待事件处理完成。

需要明确的是,这仅适用于React控制的综合事件处理程序和生命周期方法。例如,状态更新不在AJAX和setTimeout事件处理程序中进行批处理

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android