反应-为什么循环状态更新在递归状态更新之前？

Question

When you click the start button, it starts two counters. One uses recursion and the other uses a for loop. Why does the looping counter block the counting of the recursive counter? Also, why is there a limit for the number of iterations in the for loop?

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

Lets step through the code:

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

It loops 1000 times. Thats much and will probably hang the browser for a bit.

 setTimeout(/*callback*/, 1);

You add a lot of timeouts to the queue. Now the code is done. One tick later, all timeouts fire at the same time, and will be executed directly one after another. Thats why the counter directly jumps from 1000 to 2000.

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

Cause there is only one thread, and that will be blocked by the 1000 callbacks that all get into the threads queue at the same time. The recursive timeout will also end in the queue, therefore it will only be executed after the 1000 others, which takes time.

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

There is no number of limitations in a loop, however if you block the thread for too long it crashes to help the client:

 while(true );

Additionally as chris pointed out, calling setState too often in a loop might get you in trouble.

Answer 2

I don't think you want

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

as that queues 1000 timeouts without waiting for the previous timeout to finish . And, additionally, is blocking.

Here's a working codesandbox with what I think you're going for: https://codesandbox.io/s/2xy00529jp

I took a little bit of a different approach - I'm keeping track of the timeouts and clearing them on stop - I don't think there's anything wrong with using a flag ( this.state.stop ), but I find my way a little cleaner. Additionally, I'm using the callback for of this.setState - this is super important when doing a large number of sequential state updates where the new state value relies on the previous state value. Take a look through this page for more info.