为什么全局变量在 React 中执行两次

如何解决为什么全局变量在 React 中执行两次

我是前端开发和学习 React 的新手。现在我正在尝试构建一个 hello-world 项目。

执行 npx create-react-app myapp 后，我得到了一个初始 React 项目，我只是在文件 App.js 中编码。

import React,{useState} from 'react';

var counter = 0;

function App() {
  const [counter2,setCount] = useState(0);
  const increment = () => {
    setCount(counter2 + 1);
  };
  
  return(
    <div>
      <button onClick= {increment}>Increment</button>
      <h1>{counter++}</h1> // 1,3,5,7... WHY???
      <h1>{counter2}</h1>  // 0,1,2,3...
    </div>
  );
}

export default App;

执行npm start后，我得到了我的索引页，它包含三个部分：一个按钮和两个数字。

令我惊讶的是，当我点击按钮时，counter2 按预期增加，但 counter 增加了两倍。这意味着继续单击按钮会给我以下结果：

1 0、3 1、5 2...

为什么全局变量counter是两两增加，而不是一一增加？

另外，React State 和普通全局变量有什么区别？

解决方法

当您在 <React.StrictMode> 中包装一个组件时，它会运行某些函数两次，其中之一是您的功能组件的函数体：

这是通过故意重复调用以下函数来完成的：

... 函数组件主体

-React docs

这只能在开发模式下完成，这样做的目的是帮助您捕捉项目中的副作用。

看起来好像你的组件只被执行一次，因为将 console.log() 放在你的功能组件中只会在每次状态更改时运行一次。这是因为，从 React 17 开始，他们更新了 console.log 方法以不登录您的函数的第二次调用：

从 React 17 开始，React 自动修改控制台 console.log() 之类的方法可以在第二次调用中使日志静音 生命周期函数

-React docs

但是，通过保存对 console.log 方法的引用并使用它来执行日志，有一种解决方法。这样做可以让你看到你的组件被执行了两次：

const log = console.log;
function App() {
  const [counter2,setCount] = useState(0);
  const increment = () => {
    setCount(counter2 + 1);
  };
  log("Rendering,counter is:",counter);
  return(
    <div>
      <button onClick= {increment}>Increment</button>
      <h1>{counter++}</h1> 
      <h1>{counter2}</h1> 
    </div>
  );
}

上面会在组件挂载时输出如下内容，说明函数体运行了两次：

Rendering,counter is: 0
Rendering,counter is: 1

如果您移除 <React.StrictMode> 组件，则每次渲染时计数器都会增加 1，因为 React 将不再重复调用您的功能组件主体，并且您的组件主体只会被调用一次：

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

---

就全局变量与状态而言，主要区别已在 comment above 中指出。也就是说，当您使用 setMethodName() 更新您的状态时，您将导致您的组件主体重新渲染，当您更新普通变量时不会发生这种情况，因为 React 不会意识到对其所做的更改。