为何useState会引发组件两次渲染？技术疑问求助

嘿，这个问题其实挺常见的，我来给你拆解清楚～

你看到组件挂载和点击时都渲染两次（console.log输出两次），核心原因是React的严格模式（Strict Mode）在开发环境下的特殊行为。

具体原因 #

React的Strict Mode是一个开发专属工具，它会故意让组件的渲染逻辑、函数组件的顶层代码执行两次，目的是帮你提前揪出那些不符合React规则的副作用代码——比如某些代码执行一次时看似正常，但重复执行就会暴露问题（比如错误的状态更新、重复的订阅/请求、潜在的内存泄漏等）。

你的代码运行在默认开启Strict Mode的环境中，所以就出现了两次渲染的情况。

验证方法 #

如果想确认是Strict Mode导致的，你可以把项目中的Strict Mode包裹去掉：
原来的入口文件（一般是index.js）可能是这样的：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

修改成去掉Strict Mode的版本：

import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(<App />);

再运行代码，你会发现console.log只会输出一次false（挂载时），点击按钮后输出一次true，完全符合你原本预期的行为。

重要提示 #

这个两次渲染的行为只存在于开发环境，生产环境下Strict Mode不会触发重复渲染，所以完全不用担心生产环境会有这个问题。React这么做的本质是帮你写出更健壮、符合规范的代码哦～

内容的提问来源于stack exchange，提问作者Vicens Fayos