reactjs - 为什么react函数组件在初始渲染时会执行两次内部代码？

Question

我有以下代码:

// App.js
import { useEffect } from "react";

let count1 = 0;
function App() {
  console.log("render");
  console.log("before", count1);
  count1 += 1;
  useEffect(() => console.log("effect", count1));
  console.log("after", count1);

  return <button></button>;
}

export default App;

// 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
);

初始渲染后，Chrome 中的控制台结果为:

我不知道为什么 count1 的值是 2最后。

Answer 1

这是因为StrictMode您的 index.js 中使用的包装器大概。
你可以阅读它here in the doc .
这是为开发人员提供的一项功能，可以更轻松地诊断错误，正如文档中所说:

Strict mode checks are run in development mode only; they do notimpact the production build.

如果你不喜欢这个功能，你可以从你的项目中删除它，你可以看到 here in sandbox ，在我评论 Strictmode 之后，它现在渲染一次。