javascript - 我是 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调用，这可能解释了您所看到的差异:

Starting with React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where a workaround can be used.