如何不将Provider放在层级顶部，用React Context API实现任意组件传值

<Parent Component>       level-1
    <Child Component1>   level-2
        <Grand Child1.0> level-3
        <Grand Child1.1> level-3
    <Child Component2>   level-2
        <Grand Child2.0> level-3
        <Grand Child2.1> level-3

首先需要澄清一个常见的认知误区：React Context 的 Provider 并非必须放在整个应用的最顶层根节点才能生效，它只要放在所有需要消费该 Context 的组件的公共祖先节点即可。比如你需要让上述层级中的 Grand Child1.0 和 Grand Child2.1 通信，只要把 Provider 挂载在它们的公共祖先 层级即可，不需要放到比 Parent 更高的节点。

如果确实无法在目标消费组件的公共祖先节点挂载 Provider（比如两个组件属于完全独立的 React 根实例、微前端场景下分属不同子应用等），可以参考以下可行方案： #

方案1：基于 Context API 的跨层级/跨实例同步 #

把 Context 对应的状态托管在 React 组件树外的单例模块中，多个独立挂载的 Provider 共享同一个外部状态，状态变更时通知所有关联的 Provider 触发更新。
示例实现：

// context-store.js 全局单例模块
const sharedStore = {
  data: '初始值',
  subscribers: new Set()
}

// 更新全局状态
export const updateSharedData = (newData) => {
  sharedStore.data = newData
  sharedStore.subscribers.forEach(cb => cb(newData))
}

// 订阅状态变更
export const subscribeDataChange = (callback) => {
  sharedStore.subscribers.add(callback)
  // 返回取消订阅方法
  return () => sharedStore.subscribers.delete(callback)
}

// 获取当前状态
export const getSharedData = () => sharedStore.data

Provider 侧实现：

import { createContext, useContext, useEffect, useState } from 'react'
import { getSharedData, subscribeDataChange } from './context-store'

const SharedContext = createContext()

export const SharedProvider = ({ children }) => {
  const [data, setData] = useState(getSharedData())
  useEffect(() => {
    // 订阅全局状态变更，同步到当前Provider的state
    return subscribeDataChange((newData) => setData(newData))
  }, [])

  return <SharedContext.Provider value={data}>{children}</SharedContext.Provider>
}

export const useSharedData = () => useContext(SharedContext)

这种方案下，你可以在任意需要消费状态的组件的上层挂载SharedProvider，所有Provider的状态都会自动同步，不需要必须挂载到顶部。 #

方案2：全局发布订阅（Event Bus）模式 #

完全不依赖 React 组件层级，通过全局事件中心实现任意组件的通信。
示例实现：

// event-bus.js 全局单例
const EventBus = {
  eventMap: new Map(),
  // 订阅事件
  on(eventName, callback) {
    if (!this.eventMap.has(eventName)) {
      this.eventMap.set(eventName, new Set())
    }
    this.eventMap.get(eventName).add(callback)
  },
  // 触发事件
  emit(eventName, payload) {
    this.eventMap.get(eventName)?.forEach(cb => cb(payload))
  },
  // 取消订阅
  off(eventName, callback) {
    this.eventMap.get(eventName)?.delete(callback)
  }
}

export default EventBus

使用方式：

• 发送数据的组件：EventBus.emit('custom-event', { msg: '需要传递的数据' })
• 接收数据的组件：在useEffect中订阅事件，组件卸载时取消订阅，避免内存泄漏

useEffect(() => {
  const handleEvent = (data) => {
    console.log('收到传递的数据：', data)
  }
  EventBus.on('custom-event', handleEvent)
  return () => EventBus.off('custom-event', handleEvent)
}, [])

方案3：轻量无依赖状态管理库 #

使用Zustand、Jotai这类轻量状态管理库，其状态默认托管在React组件树之外的单例中，不需要强制在根节点挂载Provider，任意层级的组件都可以直接订阅和修改状态。 #

方案4：原生CustomEvent通信 #

如果是同页面下完全独立的React根实例场景，可以直接使用浏览器原生的自定义事件API实现通信：

// 发送数据的组件
const sendData = () => {
  window.dispatchEvent(new CustomEvent('share-data', {
    detail: { msg: '传递的数据' }
  }))
}

// 接收数据的组件
useEffect(() => {
  const handleReceive = (e) => {
    console.log('收到数据：', e.detail)
  }
  window.addEventListener('share-data', handleReceive)
  return () => window.removeEventListener('share-data', handleReceive)
}, [])

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