这个问题的根源确实是多个React实例共存，我来帮你拆解本地安装和远程安装的差异，以及为什么远程安装能自动解决问题：

1. 本地安装时的多实例冲突 #

当你通过本地路径（比如npm install ../your-component-lib）或者npm link安装组件库时，组件库自身的node_modules会被完整复制到主项目的依赖目录中。如果你的组件库package.json把react、react-redux这类核心依赖放在了dependencies而非peerDependencies里，组件库会自带一份独立的React实例。

Hooks的运行依赖React内部的全局状态追踪机制，每个React实例都有自己独立的上下文环境。当组件库中的useSelector调用时，它会尝试绑定到组件库自带的React实例上下文，但主项目的组件树是基于主项目的React实例渲染的，两者上下文不匹配，就会抛出Invalid hook call的错误。

2. 远程安装为什么能规避问题 #

当你把组件库发布到远程仓库（如npm）后，重新安装时npm会自动执行依赖扁平化处理：

• 如果主项目已经安装了符合版本要求的React，npm会直接复用主项目的React实例，不会在组件库的子node_modules中重复安装。
• 这样整个项目只会存在一个React实例，组件库的Hooks就能正确绑定到主项目的React上下文，自然不会触发报错。

关键的package.json配置修正 #

你的组件库的package.json里，react和react-redux应该被声明为peerDependencies，而不是dependencies。示例配置如下：

{
  "name": "your-component-library",
  "version": "1.0.0",
  "peerDependencies": {
    "react": "^18.0.0",
    "react-redux": "^8.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-redux": "^8.0.0"
  }
}

• peerDependencies：告诉npm，组件库依赖这些包，但需要由使用它的主项目提供，不会自行安装。
• devDependencies：仅在组件库本地开发、构建时安装，用于调试和编译。

本地开发时的临时解决方案 #

如果需要继续本地开发组件库，可以通过以下方式避免多实例冲突：

• 在组件库目录下运行npm link ../your-main-project/node_modules/react（替换为你的主项目实际路径），让组件库直接复用主项目的React实例。
• 或者使用yalc这类工具替代npm link，它能更精准地模拟远程安装的依赖扁平化行为。

内容的提问来源于stack exchange，提问作者Doraemon