使用React useState()出现异常重复更新的技术问题咨询

• 你遇到的情况是**React开发环境下StrictMode（严格模式）**导致的，并非第二次点击真的触发了状态更新。

• 具体逻辑：

  • 初始渲染时，state name 为空字符串，无依赖项的useEffect执行，控制台打印hi和空字符串。
  • 第一次点击按钮，setName('amritesh')将state从空字符串改为'amritesh'，触发组件重新渲染，useEffect执行，打印hi和'amritesh'。
  • 由于开发环境默认启用StrictMode（React 18+的严格模式会模拟组件「挂载-卸载-重新挂载」的过程），组件会被重新渲染一次，此时state仍为'amritesh'，无依赖的useEffect再次执行，所以你会看到第二次打印。
  • 后续点击按钮时，setName('amritesh')传入的新值和当前state完全相同，React通过浅比较判断无需更新，因此不会触发组件渲染，useEffect也就不再执行。

• 验证方式：关闭StrictMode（移除项目根组件外层的<StrictMode>标签）后，第一次点击只会打印一次hi和'amritesh'，后续点击无任何输出，完全符合你对Virtual DOM机制的认知。

内容的提问来源于stack exchange，提问作者AMRITESH GUPTA