1. 排查过程

首先删除一下无关紧要的代码，变成：

let counter = 0

export default function App() {
  useEffect(() => {
    console.log(77771, counter)
  })
  
  console.log(77772, counter)
  counter += 2
  
  return null
}
复制代码

发现输出还是77771中的 counter 还是4，怀疑是 useEffect 的坑，于是改成 setTimeout：

let counter = 0

export default function App() {
  console.log(77772, counter)
  counter += 2
  
  setTimeout(() => console.log(77773, counter), 1000)

  return null
}
复制代码

发现77773还是4，但这次打印了2次：

这么简单的代码没道理出现这种问题啊！于是去查其他文件，看到 index.js 里用对 App 组件做了如下包裹：

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);
复制代码

或许是 StrictMode 的原因？删掉它试了下，果然正常了！

2. 定位原因

找到问题在哪，定位原因就容易多了，百度搜“StrictMode多次渲染”，很快发现大家早就知道了这个问题，浏览了几篇，大概是说在 StrictMode 下，组件的一些方法会被调用多次，了解原因后，于是去翻官方文档加以确认：

严格模式不能自动检测到你的副作用，但它可以帮助你发现它们，使它们更具确定性。通过故意重复调用以下函数来实现的该操作：

class 组件的 constructor，render 以及 shouldComponentUpdate 方法

class 组件的生命周期方法 getDerivedStateFromProps

函数组件体

状态更新函数 (即 setState 的第一个参数）

函数组件通过使用 useState，useMemo 或者 useReducer

确认了 函数组件在 StrictMode 下会被重复调用，至此还剩下一个小问题：既然组件函数被多调用了一次，那么 console.log 应该成对出现，为啥同步的 console.log 会少一个？继续看文档：