reactjs - 为什么在使用状态钩子（useState）时react会重新渲染两次？

Question

我App基于reactjs 的state hook示例创建了一个组件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 示例附带的解释（上面的链接），我希望单击按钮会导致App重新渲染一次。但是，单击（一次）实际上会导致重新渲染发生两次：

为什么这个例子会导致重新渲染发生两次？

我怎样才能纠正这个问题，以免发生不必要的事情？

---

注意：每次单击时，“之前”和“之后”的两个新行都会打印到控制台，因此每次单击都会出现双重渲染，而不是由于初始渲染。

标签： reactjs

Answer 1

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

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

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

删除<React.StrictMode>摆脱了这个问题。

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

进一步阅读： React Components 渲染了两次——有什么办法解决这个问题？