多React根实例下如何共享PrimeReact Context，避免重复创建实例？

When working with multiple React root instances in a non-full React app, you can share a single PrimeReact Context by reusing the same configuration across all providers and syncing updates if needed. Here are two practical approaches:

1. Static Shared Configuration (For Non-Changing Settings) #

If your PrimeReact config (theme, locale, etc.) doesn’t need updates after initialization, create a singleton configuration object and pass it to every PrimeReactProvider in each root.

Step 1: Create a Shared Config File #

// src/sharedPrimeReactConfig.js
export const sharedPrimeReactConfig = {
    theme: {
        preset: 'lara-light-indigo',
        // Add other theme settings as needed
    },
    locale: {
        // Shared locale config if applicable
    }
};

Step 2: Use the Config in Each React Root #

Every time you render a React root, wrap it with PrimeReactProvider and pass the shared config:

import { render } from 'react-dom';
import { PrimeReactProvider } from 'primereact/api';
import { sharedPrimeReactConfig } from './sharedPrimeReactConfig';
import YourReactComponent from './YourReactComponent';

// Render first root
render(
    <PrimeReactProvider value={sharedPrimeReactConfig}>
        <YourReactComponent />
    </PrimeReactProvider>,
    document.getElementById('react-root-1')
);

// Render second root (same config)
render(
    <PrimeReactProvider value={sharedPrimeReactConfig}>
        <AnotherReactComponent />
    </PrimeReactProvider>,
    document.getElementById('react-root-2')
);

All React components across all roots will now use the same PrimeReact Context values.

2. Dynamic Shared Configuration (For Updatable Settings) #

If you need to update the config (e.g., switch themes) and have all roots reflect the change, use an observer pattern to sync updates across all providers.

Step 1: Create a Config Store with Subscription #

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

// Initial config
let currentConfig = {
    theme: { preset: 'lara-light-indigo' }
};
// Track subscribers to notify on updates
let subscribers = [];

// Update config and notify all subscribers
export const updatePrimeReactConfig = (newConfig) => {
    currentConfig = { ...currentConfig, ...newConfig };
    subscribers.forEach(subscriber => subscriber(currentConfig));
};

// Custom hook to get the latest config and subscribe to updates
export const useSharedPrimeReactConfig = () => {
    const [config, setConfig] = useState(currentConfig);
    
    useEffect(() => {
        // Subscribe to updates
        const subscriber = setConfig;
        subscribers.push(subscriber);
        
        // Cleanup subscription on unmount
        return () => {
            subscribers = subscribers.filter(s => s !== subscriber);
        };
    }, []);
    
    return config;
};

Step 2: Use the Hook in Each Root's Provider #

Wrap each root with a component that uses the custom hook to get the latest config:

import { render } from 'react-dom';
import { PrimeReactProvider } from 'primereact/api';
import { useSharedPrimeReactConfig } from './sharedPrimeReactConfig';
import YourComponent from './YourComponent';

// Wrapper component to inject the shared config
const RootWrapper = ({ children }) => {
    const config = useSharedPrimeReactConfig();
    return <PrimeReactProvider value={config}>{children}</PrimeReactProvider>;
};

// Render root with wrapper
render(
    <RootWrapper>
        <YourComponent />
    </RootWrapper>,
    document.getElementById('react-root-1')
);

Step 3: Update Config Anywhere #

Call updatePrimeReactConfig from any part of your app (React or non-React) to sync changes across all roots:

import { updatePrimeReactConfig } from './sharedPrimeReactConfig';

// Switch to dark theme
updatePrimeReactConfig({
    theme: { preset: 'lara-dark-indigo' }
});

Critical Check: Avoid Duplicate PrimeReact Instances #

Ensure your project has only one installation of PrimeReact. Duplicate copies (e.g., from nested dependencies) will create separate Context instances, breaking shared state. Run npm ls primereact to verify and resolve duplicates if needed.

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