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

npx create-react-app my-app --template typescript

然后，我将 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

我的问题：
为什么 App 渲染被调用两次？
如何使用该 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"
    ]
  }
}