javascript - React——为什么循环状态更新先于递归状态更新？

Question

当您单击开始按钮时，它会启动两个计数器。一种使用递归，另一种使用 for 循环。为什么循环计数器会阻塞递归计数器的计数？另外，为什么for循环中的迭代次数有限制？

import React from 'react'
export default class Clock extends React.Component {

state = {
    recursiveCount: 0,
    loopCount: 0,
    stop: false
  }

  clickStart = () => {
      this.setState({
      stop: false
}, () => {
      this.startRecursion()
      this.startLooping()
     })
  }

   startLooping = () => {
       for (let i = 0; i < 1000; i++) {
       setTimeout(() => {
            this.setState({
           loopCount: this.state.loopCount + 1
      })
  }, 1)
    }
  }

   stop = () => {
     this.setState({
     stop: true
})
  }

  startRecursion = () => {
        if (!this.state.stop) {
        setTimeout(() => {
        this.setState({
          recursiveCount: this.state.recursiveCount + 1
        }, () => {
          this.startRecursion()
       })
      }, 1)
    }
  }

  render () {
    return (
     <div>
     <button className = 'button' onClick = 
 {this.clickStart}>Start</button>
     <button className = 'button' id = 'stop' onClick = 
{this.stop}>Stop</button>
     <h1>The recursive function has been recursively called {this.state.recursiveCount} times</h1>
  <h1> The iterative function has been iteratively called {this.state.loopCount} times </h1>
 </div>
)
  }


 }

Answer 1

让我们单步执行代码:

  for (let i = 0; i < 1000; i++) {

循环1000次。就这么多，可能会让浏览器挂起一段时间。

 setTimeout(/*callback*/, 1);

您向队列添加了大量超时。现在代码已经完成了。一滴答之后，所有超时同时触发，并且将直接依次执行。这就是为什么计数器直接从 1000 跳到 2000。

Why does the looping counter block the counting of the recursive counter?

因为只有一个线程，并且该线程将被同时进入线程队列的 1000 个回调阻塞。递归超时也会在队列中结束，因此只会在其他 1000 个之后执行，这需要时间。

Also, why is there a limit for the number of iterations in the for loop?

循环中没有数量限制，但是如果您阻塞线程太长时间，它就会崩溃以帮助客户端:

 while(true );

此外，正如 chris 指出的那样，在循环中过于频繁地调用 setState 可能会给您带来麻烦。