Reactjs 有多个React实例意味着什么？

上下文：我在我的React应用程序（使用

npm

+创建React应用程序+TypeScript）中遇到了一个问题，似乎我在应用程序中有多个React副本。这是基于测试

window.React1===window.React2

中给出的诊断代码段

这个问题并不要求解决这个问题（我将单独调查）。相反，我想知道拥有图书馆的副本意味着什么。如何将其作为CRA生成的大型捆绑脚本的一部分传递到浏览器，以及在源代码中编写

import React from'React'

时选择哪个副本？重复库是如何发生的，为什么

npm

允许这样做

---

答案可能是“去了解JS包管理和捆绑是如何工作的”，这可能是非常合理的，但如果有人有任何具体的答案和指向更多资源的建议，我将非常感激。TIA。

首先，让我们清楚地说明复制库在这种情况下的含义。如果要解压缩捆绑的项目，可能会发现React的多个版本，例如16和17。在接下来的讨论中，这是一个很好的框架

虽然大多数情况下，这种复制是错误的，但在某些情况下，这可能是可取的。在讨论你的具体案例之前，让我们先讨论一下这个问题

一个很好的例子是大型分布式开发团队，他们使用类似于。简要说明，两个团队可能负责页面的两个不同部分，并具有各自的依赖项集，而不会影响其他团队：

 ┌───────────────────────────┐
 │          Webpage          │
 │ ┌──────────┐ ┌──────────┐ │
 │ │ React 16 │ │ React 17 │ │
 │ └──────────┘ └──────────┘ │
 └───────────────────────────┘

虽然这看起来像是浪费空间，但开发团队在这里做了一个折衷：它们的页面负载稍大一些，但它们减少了团队间版本同步的需要。也许一个团队已经准备好使用最新版本，但另一个团队仍然需要在准备更新之前完成工作。另一个很好的例子是遗留代码-您可能有工作正常但未维护的代码，因此您可以选择按其工作时间发货：

 ┌──────────────────────────────┐
 │           Webpage            │
 │ ┌───────────┐ ┌────────────┐ │
 │ │ Angular 1 │ │ Angular 10 │ │
 │ └───────────┘ └────────────┘ │
 └──────────────────────────────┘

希望以上说明了为什么包管理器允许这样的设置：它们是可取的，并且在某些情况下非常有益

设置的方式因项目设置的不同而不同，但上述方法之一是使用某种子项目，每个子项目都有自己的

包。json

：

project
├─ package.json
├─ one subproject
│  └─ package.json
└─ another subproject
   └─ package.json

在上述情况下，

一个子项目

中的导入将设置为通过该文件夹中的

包.json

解析，而

另一个子项目

中的导入将设置为通过其

包.json

解析。配置模块分辨率的一种常见方法是通过，当然也可以使用其他方法

希望以上解释了为什么这是可能的，以及一些关于何时这可能是一个好的考虑的提示

正如前面提到的，大多数情况下这是一个错误。大多数用户并不是有意要这样做的，他们并不打算使用同一个库，但有微小的差异，例如React 17.0.0和React 17.0.1。对于常见用例，上述两种情况实际上应该是可互换的

有许多方法可以解决此问题，但最常见的方法是配置不正确。对等依赖关系是库、组件包等指定它们所依赖的内容的一种方式，同时允许共享依赖关系。一个常见的例子是UI组件库，它支持任何React版本，只要它比React 16更新。如果您的项目使用React 17，那么您可以愉快地引入该组件库，并在代码库中拥有单一版本的React

当库作者（无意中）将React 16上的依赖项配置为常规依赖项而不是对等依赖项时，会发生错误。在这种情况下，作者基本上是说库需要React 16，不允许其他任何内容，并且最终将安装两个版本的React

---

以上所有内容都是非常宽泛的，涉及了很多细节，但希望这能让您对正在解决的问题有所了解。

欢迎来到Stackoverflow，有一些问题需要首先回答，例如您是否在CRA项目上使用了任何第三方软件包。此消息还将主要显示您是否第一次开始开发易耗组件。许多这样的项目通过将其应用程序与标记为外部依赖项的react和react dom捆绑在一起来解决这个问题，以确保它们都指向相同的“副本”。另一个问题是，您一直在拉入react未标记为对等依赖项的依赖项，这会导致版本不匹配我的上一条评论太长，但检查您是否有react的多个副本的一个好方法是运行

npm ls react

命令。谢谢@Win，正如我提到的，在这个问题中，我不是问如何用replicate-React解决特定问题（我可能在其他地方这样做）。相反，我问的是一个更一般的问题，在这种情况下，拥有一个复制库意味着什么，它如何与npm和导入解析一起发挥作用，等等。就像我说的，它通常是从第三方模块的开发角度派生出来的。除非您安装或安装了一个软件包，或者正在构建自己的外部组件，否则您不应该面临此问题。至于进一步研究这个问题，我真的不知道除了试图通过“钩子只能在身体内部调用…”这个错误可以调用您在回购协议中通过github问题提到的错误之外，还有什么建议：因为StackOverflow针对的是具体的问题，而不是像这样广泛的问题，所以它是错误的