使用 create-react-app 創建的 React 應用程序無故增加模塊范圍的變量

Question

我有一個使用 create-react-app 創建的 React 應用程序。 我正在測試一些東西並創建了以下代碼：

import React, {useState} from "react";

var a = 1;

function useForceUpdate() {
  const [state, setState] = useState(true);

  return [() => setState(!state)];
}

function App() {
  const [forceUpdate] = useForceUpdate();
  a++;
  console.log(a);

  return (
    <div onClick={forceUpdate}>
      {a}
    </div>
  );
}

export default App;

出於某種原因，它的值從 3 開始，每次點擊它都會增加 2 或 3 而不是 1，但這僅發生在我已經存在的項目中，該項目具有額外的庫，例如酶、react-hooks-testing-library 和其他。 在僅更改 App.js 代碼的新項目中，它從 3 開始，並且在單擊時始終以 2 為增量遞增。 我在 codepen 上嘗試過它，它以 2 的值開始，並按應有的方式遞增 1。 這是codepen（用以下代碼替換.js文件： https://reactjs.org/redirect-to-codepen/hello-world ）：

var a = 1;

function useForceUpdate() {
  const [state, setState] = React.useState(true);

  return [() => setState(!state)];
}

function App() {
  const [forceUpdate] = useForceUpdate();
  a++;
  console.log(a);

  return (
    <div onClick={forceUpdate}>
      {a}
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

在codesandbox（只需將其中的.js文件替換為下面提供的文件： https://codesandbox.io/s/new?file=/src/App.js ）它再次以值3開始並遞增2 每次：

import React from "react";

var a = 1;

function useForceUpdate() {
  const [state, setState] = React.useState(true);

  return [() => setState(!state)]
}

function App() {
  const [forceUpdate] = useForceUpdate();
  a++;
  console.log(a);

  return (
    <div onClick={forceUpdate}>
      {a}
    </div>
  );
}

export default App;

為什么他們的行為如此不同？

Answer 1

發生這種情況是因為React's Strict Mode 。React 的嚴格模式雙重調用某些 function 以識別您的應用程序中任何不需要的副作用。 你可以在這里閱讀更多信息： React Strict Mode

現在，如果你 go 到你的應用程序的index.js文件，你會看到應用程序被嚴格模式包裝。 Codesandbox 中 index.js 文件的情況類似。

例如，

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

但是，在 codepen 的情況下，代碼沒有任何 StrictMode 包裝，因此，它只添加一次到 a.

Answer 2

這是關於將文件划分為模塊，但我無法解釋引擎蓋下到底發生了什么。 最有可能的是，以某種方式連接模塊只是讀取文件，而不是將其代碼包含在主代碼中。 這將增加變量。

您可以輕松檢查它：

• 第一種情況 - 在單獨的文件（模塊）中創建組件並將其導入到根 index.js
• 第二種情況 - 在一個文件（模塊）中調用 ReactDOM.render 創建組件

並在組件外添加 console.log

• 在第一種情況下 - 您將看到 3 個日志，2 個在組件外部，一個在內部。
• 在第二種情況下 - 2 個原木，1 個外部和 1 個內部

當然，在第一種情況下它以 3 開頭，因為您使用的是捆綁代碼。

但在我看來，在組件代碼或 state 管理器之外定義組件更改變量是錯誤的