我是 React 的新手，有人能告诉我为什么会这样吗...？

Question

这是代码

import React from "react"

let x = 0;

const App = () => {
  x++;
  console.log(x)

  return(
    <div>
      <p>{x}</p>
    </div>
  )
}

export default App;

控制台显示 1...但页面显示 2...

函数内部的代码如何执行两次（显然 x++ 运行两次）并且控制台只输出一次（1）

Answer 1

这可能是由于React.StrictMode在 . https://reactjs.org/docs/strict-mode.html。它还抑制console对后续渲染的调用，这可以解释您所看到的差异：

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