javascript - 如何在 React 中使用 setState 在内部更新状态？

Question

在 React 中，我们使用 setState 来更新组件的状态。 setState 是一个异步过程，所以如果我们在同一个函数中有多个 setState。

问题:内部如何处理更新的批处理？

---

场景 1:

在 componentDidMount 中的 for 循环中更新状态，但在同一执行周期中。

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    var state = { count: 0 };
    Object.defineProperty(this, 'state', {
    	set: function(value) { console.log('called', value.count); state = value },
      get: function() { return state; }
    })
  }
  
  test() {
  	for (let i = 0; i< 1000; i++) {
      this.setState({ count: i });
    }
  }
  
  componentDidMount() {   
    this.test();
  }
  
  render() {
    return (
      <div>
        { this.state.count }
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

---

场景 2:

在 componentDidMount 中的 for 循环中更新状态，但在不同的执行周期中。

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    var state = { count: 0 };
    Object.defineProperty(this, 'state', {
    	set: function(value) { console.log('called', value.count); state = value },
      get: function() { return state; }
    })
  }
  
  test() {
  	for (let i = 0; i< 1000; i++) {
      this.setState({ count: i });
    }
  }
  
  componentDidMount() {   
    setTimeout(this.test.bind(this), 0);
  }
  
  render() {
    return (
      <div>
        { this.state.count }
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

---

如果您注意到场景 1 和场景 2，在场景 1 中仅执行 2 次更新(假设 1 次用于初始更新，其他用于最终)。然而，在场景 2 中，状态会针对每个 setState 发生突变/更新。

那么异步更新是如何工作的呢？什么定义了批量更新操作？

Answer 1

They will be batched together if you are inside a React event handler. React batches all setStates done during a React event handler, and applies them just before exiting its own browser event handler.

setTimeout 不是 React 事件处理程序，因此 React 不会在 setTimeout 回调中批量更新状态(场景 2)。

引用:https://github.com/facebook/react/issues/10231#issuecomment-316644950