多ReactDOM独立渲染组件间的数据传递及统一存储方案咨询

Hey there! When you're rendering multiple independent React roots with ReactDOM.render() and need a unified data store that all these roots can access and update, here are some practical, battle-tested approaches:

React's built-in Context API works great for cross-component data sharing, even across separate roots—you just need to make sure all roots tap into the same global state instance.

First, create a global context and a provider that holds your shared state:

// src/context/GlobalContext.js
import { createContext, useContext, useState, useEffect } from 'react';

// Global state container (shared across all providers)
let globalSharedState = { user: null, theme: 'light' };
let stateUpdateListeners = [];

const GlobalContext = createContext();

export function GlobalProvider({ children }) {
  const [localState, setLocalState] = useState(globalSharedState);

  // Sync local state with global state when it changes
  useEffect(() => {
    const listener = (newState) => setLocalState(newState);
    stateUpdateListeners.push(listener);
    return () => {
      stateUpdateListeners = stateUpdateListeners.filter(l => l !== listener);
    };
  }, []);

  const updateSharedState = (newData) => {
    globalSharedState = { ...globalSharedState, ...newData };
    // Notify all listeners to update their local state
    stateUpdateListeners.forEach(listener => listener(globalSharedState));
  };

  return (
    <GlobalContext.Provider value={{ sharedState: localState, updateSharedState }}>
      {children}
    </GlobalContext.Provider>
  );
}

export function useGlobalContext() {
  return useContext(GlobalContext);
}

Then wrap each of your root components with this provider:

// src/index.js
import { GlobalProvider } from './context/GlobalContext';
import Header from './Header';
import SideBar from './SideBar';

// Render Header to its DOM node
ReactDOM.render(
  <GlobalProvider>
    <Header />
  </GlobalProvider>,
  document.getElementById('header')
);

// Render SideBar to its DOM node
ReactDOM.render(
  <GlobalProvider>
    <SideBar />
  </GlobalProvider>,
  document.getElementById('sidebar')
);

Now any component in either root can use useGlobalContext() to access or update the shared state, and all roots will sync automatically.

Libraries like Zustand or Redux Toolkit are designed for global state, and they work seamlessly across multiple React roots—no extra provider wrapping per root needed.

Here's how to set up Zustand:

// src/store.js
import { create } from 'zustand';

export const useGlobalStore = create((set) => ({
  sharedData: { user: null, theme: 'light' },
  updateSharedData: (newData) => set((state) => ({
    sharedData: { ...state.sharedData, ...newData }
  })),
}));

Then use it in any component, regardless of which root it's in:

// src/Header.js
import { useGlobalStore } from './store';

function Header() {
  const { sharedData } = useGlobalStore();
  return <div>Current User: {sharedData.user?.name}</div>;
}

// src/SideBar.js
import { useGlobalStore } from './store';

function SideBar() {
  const updateSharedData = useGlobalStore(state => state.updateSharedData);
  return (
    <button onClick={() => updateSharedData({ user: { name: 'Hardik' } })}>
      Set User
    </button>
  );
}

This is my top recommendation—it's simple, has minimal boilerplate, and just works out of the box for multiple roots.

If you don't want to use React-specific tools or third-party libraries, a custom event bus lets components communicate by publishing and subscribing to events.

Create the event bus:

// src/eventBus.js
class EventBus {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) this.events[eventName] = [];
    this.events[eventName].push(callback);
  }

  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  }

  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
    }
  }
}

export const eventBus = new EventBus();

Use it in components:

// src/Header.js
import { useState, useEffect } from 'react';
import { eventBus } from './eventBus';

function Header() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const handleUserUpdate = (newUser) => setUser(newUser);
    eventBus.on('userUpdated', handleUserUpdate);
    // Cleanup subscription to avoid memory leaks
    return () => eventBus.off('userUpdated', handleUserUpdate);
  }, []);

  return <div>User: {user?.name}</div>;
}

// src/SideBar.js
import { eventBus } from './eventBus';

function SideBar() {
  const updateUser = () => {
    eventBus.emit('userUpdated', { name: 'Hardik' });
  };
  return <button onClick={updateUser}>Update User</button>;
}

This is flexible but requires manual subscription management—good for simple data flows.

For quick prototyping or tiny projects, you can attach data to the global window object, but this is not recommended for production (it pollutes the global scope and lacks built-in state change notifications).

Example:

// Initialize global data
window.globalAppData = { user: null };

// src/Header.js
import { useState, useEffect } from 'react';

function Header() {
  const [user, setUser] = useState(window.globalAppData.user);

  useEffect(() => {
    const handleDataChange = () => setUser(window.globalAppData.user);
    window.addEventListener('globalDataUpdated', handleDataChange);
    return () => window.removeEventListener('globalDataUpdated', handleDataChange);
  }, []);

  return <div>User: {user?.name}</div>;
}

// src/SideBar.js
function SideBar() {
  const updateUser = () => {
    window.globalAppData.user = { name: 'Hardik' };
    window.dispatchEvent(new CustomEvent('globalDataUpdated'));
  };
  return <button onClick={updateUser}>Update User</button>;
}

Stick to this only if you need a super quick, temporary solution.

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