Question

当使用Chrome / React Developer Tools调试我的React Application时，我看到了我的Application的两个实例。有人经历过吗？它实际上是渲染两个实例还是仅仅是开发人员的错误？

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

是我的整个App.js，其中App具有单个导出。

Answer 1

使用babel和webpack从头开始设置我的React应用程序时遇到了相同的问题。

我从浏览器查看了页面源，结果发现我在index.html文件中包含了两个脚本标签。我认为那是因为我包括了第一个手动引用'/bundle.js'的脚本标签。当您运行webpack开发服务器时，它将自动为您提供该服务器。

<!doctype html>
  <head>
   <meta charset="utf-8"/>
   <title>React App</title>
  </head>
  <body> 
    <div id="root"></div>
  </body>
</html>

因此请确保在运行webpack-dev-server之前，您的index.html看起来是这样

为什么我在React Dev中有两个App实例。工具？

1 个答案: