React默认创建React应用程序组件渲染两次

Question

我通过以下命令启动了新的React项目：

npx创建-反应-应用我的应用-模板打字

然后，我将App组件更改为这样：

import * as React from 'react';

export default class App extends React.Component<{}> {
  public render() {
    console.log("App Rendered");
    return (
      <div>
        Hello World
      </div>
    );
  }
}

当我查看控制台日志（在Google Chrome和Microsoft Edge中）时，我会收到以下消息：

[HMR] Waiting for update signal from WDS...
App Rendered
App Rendered

我的问题：
为什么要调用两次应用程序渲染
如何删除带有该WDS的第一封邮件？

这是我的package.json（默认为我运行的create-react-app）：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

删除React.StrictMode从src/index.tsx

Answer 2

当用React包装时。StrictMode（这是CRA模板的设置方式），在开发时，渲染将被调用两次。这样做是为了捕获某些setState函数不纯时可能出现的错误。你可以阅读这篇文章了解更多细节。