时间戳

首页 > 解决方案 > 为什么我的应用程序在 React Dev 中有两个实例。工具？

reactjs - 为什么我的应用程序在 React Dev 中有两个实例。工具？

问题描述

使用 Chrome / React 开发人员工具调试我的 React 应用程序时，我看到了我的应用程序的两个实例。有没有人经历过这个？它实际上是渲染两个实例还是只是开发人员的错误？

图片

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 有一个导出。

标签： reactjsreact-devtools

解决方案

在使用 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 看起来是这样的

推荐阅读