Si tengo, por ejemplo, una clase de administrador de red que he implementado con un patrón singleton.

export default class Manager { private static _Instance: Manager; public static get Instance(): Manager { if (Manager._Instance) { return Manager._Instance; } else { return new Manager(); } } constructor() { if (Manager._Instance) { return Manager._Instance; } Manager._Instance = this; } // Network management methods, etc. } 

Y lo instancia en la parte superior del árbol de componentes de la aplicación React, el comienzo del ciclo de vida de la aplicación:

 import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Manager from './Manager'; import Foo from './Foo'; import Bar from './Bar'; class App extends React.Component{amp}lt;{}, State{amp}gt; { private networkManager = new Manager(); constructor(props: any) { super(props); this.state = { connected: false, id: '', }; } componentDidMount = (): void ={amp}gt; { this.initNetwork(); }; initNetwork = async (): Promise{amp}lt;void{amp}gt; ={amp}gt; { try { // network management init and config } catch(err) { // handle network init errors } } render = (): JSX.Element ={amp}gt; { return ( {amp}lt;div className="App"{amp}gt; {amp}lt;Router{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path="/foo" render={(props): JSX.Element ={amp}gt; ( {amp}lt;Foo {...props} NetworkManager={this.networkManager} /{amp}gt; )} /{amp}gt; {amp}lt;Route path="/" render={(props): JSX.Element ={amp}gt; {amp}lt;Bar {...props}/{amp}gt;} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/Router{amp}gt; {amp}lt;/div{amp}gt; ); }; } 

Y luego quiero usar esa instancia en un componente hijo, obviamente tengo varias formas de hacerlo, pero ¿cuál es la mejor manera? Podría pasarlo a los componentes como accesorio, o importarlo y usar la propiedad de instancia para obtener la instancia. ¿Beneficios y desventajas de ambos enfoques?

 import React from 'react'; type Props = { networkManager: Manager; }; class Foo extends React.Component{amp}lt;Props{amp}gt; { private manager: Manager; constructor(props) { super(props); this.manager = props.networkManager; } } // alternatively in ./Bar.tsx import React from 'react'; import Manager from './Manager'; class Bar extends React.Component { private manager: Manager constructor(props) { super(props); this.manager = Manager.Instance; // new Manager() should also return the same instance } } 

¿Hay otra forma mejor de hacerlo que no conozca? Algo así como Redux sería bueno, pero mi experiencia con él es almacenar simples literales de objeto en lugar de instancias de clase, y colocar algo como esto en la tienda no parece correcto. ¿Realmente importa cómo comparto la instancia? Ambos pasan a través de accesorios e importan trabajo y son más o menos equivalentes en términos de la cantidad de mecanografía necesaria. En cuanto al rendimiento, tampoco creo que haya mucha diferencia, la instancia nunca debería cambiar y, por lo tanto, el accesorio nunca se actualizará y desencadenará una re-representación de componentes, pero eso podría ser algo a considerar. ¿Lo estoy pensando demasiado?