重新渲染何时真正发生？

Question

代码：

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setTimeout(setNumber(number + 1),2000);
        setTimeout(setNumber(number + 1),5000);
      }}>+3</button>
    </>
  )
}

我已经经历了this说

Setting state only changes it for the next render. During the first render, number was 0. This is why, in that render’s onClick handler, the value of number is still 0 even after setNumber(number + 1) was called

和this问题，所以我的一些理解是这些调用是异步的，因此其他代码继续运行。但我的疑问是何时会发生重新渲染？例如，在我的代码中，我知道进行更改为

number=>number+1

会给出所需的结果，但在

setNumber(number + 1);

之后不应出现此行重新渲染，但接下来的两行仍然超时，因此它们仍在等待，当

setNumber(number + 1);

的渲染完成时，他们不应该看到新的数字值吗？我在这里缺少什么？

现在下一步，假设这三行都在某个重新渲染队列中排队，当第一个队列条目解析时将会重新渲染，然后下一个队列条目看到更新的数值，为什么甚至没有发生这种情况？ 为什么

number=>number+1

可以解决这个问题？