Otra forma de integrar React con una aplicación jQuery existente es a través de un modelo pubsub. Esto permite al componente estar atento a las actualizaciones de la aplicación web externa y también enviar las actualizaciones de vuelta. Por ejemplo, cuando el cliente interactúa con la aplicación web existente, puede haber ciertos eventos que desencadenan métodos que luego se envían al componente React para que pueda refrescar su interfaz de usuario en consecuencia.
Hemos reemplazado la clase de Javascript de UIHelper por un modelo de pubs/submarinos. Así, el componente React puede ser informado de los eventos originados por la aplicación web externa y actualizar su estado interno y los controles de UI.

Tomemos un ejemplo sencillo. Cada vez que un usuario hace clic en un botón de la aplicación existente de jQuery, we's enviará un evento a todos los suscriptores de la clase de Javascript que se encuentren en medio y les dejará responder en consecuencia.
Podemos usar la clase de ayudante de pubs/sub para hacer esto
123456789101112varPubSubHelper={ subscribers:[],subscribe:function(parent, callbackfn){this.subscribers.push({ parent: parent, callbackfn: callbackfn });},bgColor:function(name){//Informar a los suscriptores del evento.this.subscribers.forEach(function(subscriber){ subscriber.callbackfn(name, subscriber.parent);}}};</pre>
javascript
En la clase anterior, tenemos un método de suscripción desde el cual los clientes pueden suscribirse para ser notificados de los eventos de la aplicación principal. Así, cuando el método bgColor es invocado por la aplicación existente, todos los suscriptores son informados del cambio, dándoles la oportunidad de actualizar su interfaz de usuario en consecuencia.
Tomemos un ejemplo en el que la aplicación existente actualiza el color de fondo del elemento de la interfaz de usuario en la página cada 2 segundos. Actualizará el color de fondo de verde a rojo. Abajo está el código:
1234567891011121314$(function(){setTimeout(function(){ReactDOM.render(React.createElement(MyjQueryReactComponent,{ context:PubSubHelper}),document.getElementById('root'));},0);// Cambiar el elemento bgcolor cada 2 segundos. setInterval(function(){var elm =$('#elm');var bgColor = elm.css('background-color')==='rgb(255, 255, 0)'? 'rojo':'verde';// Cambiar el color del elemento elm.css('background-color', bgColor);// Informar a los suscriptores.PubSubHelper.bgColor(bgColor);},2000)});</pre>
javascript
En el ejemplo anterior, hay un intervalo de dos segundos durante el cual se actualiza el color de fondo del elemento de la interfaz de usuario. El componente React normalmente no tendría forma de identificar el cambio de color del elemento. Tampoco tendría ninguna forma directa de acceder al propio elemento de UI. Esto se debe a que el elemento es en realidad un div fuera del alcance del componente React.
Sin embargo, usando el modelo pubsub, el componente React puede ser notificado cuando el color de fondo del elemento se actualiza. El componente React puede reaccionar y actualizar su propio elemento de UI en consecuencia.
El componente Reaccionar puede escuchar los eventos en la aplicación principal, como podemos ver en el ejemplo a continuación. También podemos ver que el constructor almacena ahora una referencia al contexto de la aplicación (modelo pubsub). Esto es similar al ejemplo anterior, pero el contexto es ahora un modelo pub/sub en lugar de la clase UIHelper.
También podemos invocar el método de suscripción para escuchar los eventos desde la aplicación web existente. En el siguiente ejemplo, we'manejará el evento onBgColor para actualizar la UI del componente React basado en los eventos disparados.
123456789101112131415161718192021222324252627classMyjQueryReactComponentextendsReact.Componente{constructor(es)(puntales){super(es);this.state={ bgColor:'red', context: props. context};// Escucha a bgColor events.this.state.context.subscribe(this,this.onBgColor);}onBgColor(bgColor, that){// Cambia el valor de estado de bgColor. that. setState({ bgColor: bgColor });}render(){retorno(&lt;div className='alert alert-success' role='alert'&gt;&lt;h3&gt;Hello,fromReact!&lt;/h3&gt;&lt;span className={'icon '+(this. state.bgColor==='red'?'icon-danger':'icon-success')+' p-3'}&gt;{this.state.bgColor}&lt;/span&gt;&lt;/div&gt;);}}</pre>
javascript
En el ejemplo anterior, nuestro componente Reaccionar tiene un título de cabecera/mensaje junto con un elemento span con un mensaje de advertencia/éxito en su interior. El mensaje actualiza su etiqueta así como el bgColor basado en el valor del estado actual bgColor. El estado bgColor obtiene un valor del evento onBgColor, que se llama como método de devolución de llamada de la clase pub/sub en la aplicación externa.
También podemos ver que la función de devolución de llamada de onBgColor recibe un nombre de bgColor junto con una referencia al contexto del componente de Reacción. Queremos que el modelo pub/sub nos envíe esta información ya que el contexto actual de nuestro manejador de eventos viene de la clase pub/sub y no de nuestro componente React. Para acceder a este.estado, tenemos que referirnos al contexto padre ese.estado en su lugar.