为什么使用状态钩子（useState）时react re-render两次？

Question

我基于状态钩子useState 的reactjs's example 创建了一个组件App。这是我的代码：

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 示例附带的解释（上面的链接），我预计单击按钮会导致 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?