React中useEffect首次执行时console.log打印两次的原因

这是React 18严格模式的默认行为。在开发环境的严格模式下，React会故意重复执行以下操作两次：

• 组件的渲染逻辑
• useEffect、useLayoutEffect的回调函数
• 状态更新相关的函数

这么做的目的是帮你提前排查代码里的副作用问题——比如那些没正确清理的定时器、订阅，或者重复执行会出问题的逻辑。这些问题在生产环境可能只会偶然触发，开发阶段的重复执行能让它们更早暴露出来，方便你修复。

如果想验证这个结论，你可以找到项目根组件的入口文件（通常是index.js），把包裹组件的<React.StrictMode>标签移除，此时首次渲染时useEffect就只会打印一次"render"了。不过开发阶段还是建议保留严格模式，它能帮你规避很多潜在的bug。

你的代码示例：

import { useState, useEffect } from "react";

function MyComponent() {
  const [resourceType, setResourceType] = useState("posts");

  useEffect(() => {
    console.log("render");
  }, [resourceType]);

  return (
    <>
      <div>
        <button onClick={() => setResourceType("posts")}>Posts</button>
        <button onClick={() => setResourceType("users")}>Users</button>
        <button onClick={() => setResourceType("comments")}>Comments</button>
      </div>
      <h1>{resourceType}</h1>
    </>
  );
}

export default MyComponent;

内容的提问来源于stack exchange，提问作者Stac Flo