为什么在使用状态挂钩（useState）时反应两次重新渲染？

Question

我已基于状态挂钩App的{​​{3}}创建了一个组件useState。这是我的代码：

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  console.log("before");
  const [count, setCount] = useState(0);
  console.log("after");

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count+1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

当我使用节点运行此命令时，App在http://localhost:3000/上呈现一个按钮：

reactjs's example

基于reactjs示例附带的解释（上面的链接），我希望单击按钮会导致App再次呈现一次。但是，单击（一次）实际上会使重新渲染发生两次：

为什么此示例导致重新渲染发生两次？

如何纠正这个问题，以免发生不必要的事情？

---

注意：每次单击时，控制台上将打印每个“之前”和“之后”的新行，因此，两次单击似乎都发生了两次渲染，而不是因为初始渲染。

Answer 1

您看到的是第一个“之前”和“之后”来自初始渲染，第二对来自单击按钮并更新状态时。

似乎有问题的代码来自<React.StrictMode>

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

删除<React.StrictMode>可以解决此问题。

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

进一步阅读： React Components rendered twice — any way to fix this?