javascript - 组件中的 SetTimeout 在 react 中执行两次

Question

当我渲染 App 组件时，setTimeout 中的代码运行两次。
我看到 setTimeout 在调用堆栈执行完毕后运行。我不知道它是否与此有关。
是否与 react 渲染组件的方式有关。
索引.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
);

应用程序.js

import "./styles.css";

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

Answer 1

您的 setTimeOut每次渲染 App 时都会调用成分。
在您的情况下，React.StrictMode导致重新渲染。
为了防止这种情况，您可以将其添加到 useEffect 中。 hook有一个空的依赖数组:

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