Javascript 组件中的SetTimeout在react中执行两次

当我呈现应用程序组件时，setTimeout中的代码会运行两次

我看到setTimeout在调用堆栈完成执行后运行。我不知道这是否与此有关

这是否与react渲染组件的方式有关

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

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

从“react”导入{StrictMode}；
从“react dom”导入react dom；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);

App.js

import "./styles.css";

export default function App() {
  
  setTimeout(() => {
    console.log(`Logged!`);
  },
  1000
  )
  
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

导入“/styles.css”； 导出默认函数App（）{ 设置超时（（）=>{ console.log（`Logged！`）； }, 1000 ) 返回( 你好 ); }

---

您的
设置超时
在
应用程序
组件的每次渲染中都会被调用

在您的情况下，
React.StrictMode
会导致重新渲染

要防止出现这种情况，可以将其添加到具有空依赖项数组的
useffect
：

useEffect(() => {
  const timer = setTimeout(() => {
    console.log(`Logged!`);
  }, 1000);
  return () => clearTimeout(timer);
}, []);

是否应
setTimeout
仅运行
componentDidMount
？其组件仅渲染一次。你能解释一下为什么
setTimout
回调会被触发两次吗？@codemonkey是因为
StrictMode
引起的。两个
console.log（'Logged！”）
有它，一个没有它。是的！你应该把它写在你的答案中，因为这是OP想要知道的。这很有效，谢谢。