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

IT技术 reactjs react-state
2021-05-01 19:00:38

我是前端开发和学习 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 和普通全局变量有什么区别？

1个回答

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

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

... 函数组件体

-react文档

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

看起来好像你的组件只被执行一次，因为console.log()在你的功能组件内部放置一个状态变化只会运行一次。这是因为，从 React 17 开始，他们已经更新了 console.log 方法来不登录你的函数的第二次调用：

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

-react文档

但是，可以通过保存对该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'));

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

其它你可能感兴趣的问题
上一篇react-sortable-tree 不适用于 react 17.0.1 下一篇如何使用 react-router-dom 进行路由？