使用 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 管理器之外定义组件更改变量是错误的