为什么'promise.then'在React组件中调用两次，而不是在console.log中调用？

Question

我对以下组件的输出感到非常困惑：

import { StrictMode } from "react"
import ReactDOM from "react-dom"

function Test(): React.ReactElement {
    console.log('render')
    Promise.resolve()
        .then(() => console.log('then ' + Math.random()))
    return <></>
}

ReactDOM.render(
  <StrictMode>
    <Test />
  </StrictMode>,
  document.getElementById("root")
)

它至少在Chrome和Firefox中产生以下输出：

00:46:30.264 render
00:46:30.267 then 0.5430663800781927
00:46:30.267 then 0.9667426372511254

转载：https://codesandbox.io/s/leagle-frost-dmcsl

编辑：我知道严格模式会导致额外的呈现，但如前所述，我会期待相同的消息计数。

Answer 1

在react严格模式下，react可能会多次运行render，这可以部分解释您所看到的情况。

但是您确实想知道，如果是这种情况，并且render被调用了多次，为什么render没有打印两次呢？第一条线索在这里：

从React17开始，React自动修改控制台方法，如console.log()，以便在第二次调用生命周期函数时使日志保持沉默。但是，在可以使用变通方法的某些情况下，它可能会导致不希望的行为。

此外，正如我所怀疑的那样，它两次从promise回调中打印console.log，但没有两次从render中打印console.log，原因是它对promise回调中的console.log的处理不同。@Trincot的回答有更多关于这部分的细节。