Todavía usas setState :

 let React = require('React'); let externalThing = require('tools/vendor/whoever/external-lib'); class MyComponent extends React.Component { constructor(props) { super(props); this.state = this.getInitialState(); } getInitialState() { // This assumes your external thing is written by someone who was // smart enough to not allow direct manipulation (because JS has // no way to monitor primitives for changes), and made sure // to offer API functions that allow for event handling etc. externalThing.registerChangeListener(() => this.updateBasedOnChanges(externalThing)); return { data: externalThing.data } } updateBasedOnChanges(externalThing) { // note that setState does NOT automatically trigger render(), // because React is smarter than that. It will only trigger // render() if it sees that this new 'data' is different // (either by being a different thing entirely, or having // different content) this.setState({ data: externalThing.data }); } render() { // ... } }

Si lo externo que está utilizando está terriblemente escrito y tiene que manipular sus datos directamente, su primer paso es escribir una API para que no manipule directamente esos datos.

 let externalData = require('externaldata') // example: this is a shared array let ExternalDataAPI = new ExternalDataAPI(externalData); ...

Y luego te aseguras de que la API tenga todos los ganchos de actualización y eventos:

 class ExternalDataAPI { constructor(data) { this.data = data; this.listeners = []; } addListener(fn) { this.listeners.push(fn); } update(...) { // do something with data this.listeners.forEach(fn => fn()); } ... }

Alternativamente, hay marcos que ya hacen esto por usted (flujo, etc.) pero también dictan de alguna manera cuántas cosas más "deben hacerse", por lo que podría ser excesivo para su necesidad.

Dado que su pregunta se trata de organizar su código de una manera manejable, en primer lugar sugeriría emparejar ReactJS con un marco de tipo Flux, como Redux o Relay.

Si desea omitir eso por ahora, puede organizar su proyecto utilizando algunos componentes de reacción en la parte superior de la jerarquía para almacenar y recuperar datos. Por ejemplo, en un componente de este tipo, en su método componentWillMount , puede iniciar un setTimeout que verifica periódicamente su matriz global y llama a setState cuando corresponda. El método de renderizado debería contener componentes secundarios que reciban este estado como accesorios.

A continuación se muestra un ejemplo. Obviamente, los temporizadores se pueden reemplazar por cualquier método que utilice para suscribirse a los cambios de datos.

 // your global object var globalState = {name: "Sherlock Holmes"} function onData(callback) { setInterval(function(){ callback(globalState) }, 1500) } var Child = React.createClass({ render: function() { return <h1>Hello, {this.props.name}</h1>; } }); var Root = React.createClass({ getInitialState: function() { return {} }, componentWillMount: function() { var that = this; this.props.onData(function(data){ that.setState({external: data}) }) }, render: function() { if (this.state.external) return <Child name={this.state.external.name}/> else return <div>loading...</div>; } }); ReactDOM .render(<Root onData={onData} />, document.getElementById('container'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div>