javascript - Communication between Reactjs Components -

after struggling redux, flux , other pub/sub methods ended following technique. not know if can cause big damage or flaws posting here light experienced programmers pros , cons.

var thismanager = function(){      var _manager = [];     return{         getthis : function(key){             return  _manager[key];         },         setthis : function(obj){                         _manager[obj.key] = obj.value;         }     } }; var _thismanager = new thismanager();  // react component class header extends component{    constructor(){       super();       _thismanager.setthis({ key: "header", value:this}    }     somefunction(data){         // call this.setstate here new data.     }    render(){       return <div />    } }  // other component living far somewhere can pass data render function , works out of box.  i.e.   class footer extends component{   _click(e){      let header = _thismanager.getthis('header');      header.somefunction(" wow new data footer event ");   }  render(){       return(       <div>           <button onclick={this._click.bind(this)}> send data header , call render </button>       </div>         );   } } 

i sending json data in application , renders desired components , can invoke render without pub/sub or deep passing down props invoke parent method changing this.setstate cause re-render.

so far application works fine , loving simplicity too. kindly throw light on technique pros , cons

regards

edit:

it bad call render changed method more pros , cons of setup.

two main concerns setup:
1. should never call react lifecycle methods directly
2. backdoors components bad idea, destroy react's maintainability

ad 1: if invoke render() (or other react method) directly, react not call componentdidmount(), componentdidupdate()` , other lifecycle methods in component tree.

dangers are:

• many designs react component rely heavily on lifecycle methods being fired: getinitialstate(), componentwillreceiveprops(), shouldcomponentupdate(), componentdidmount(), etc etc. if call render() directly, many components break or show strange behaviour.
• you run risk of breaking react's difference engine: through life-cycle management, react keeps virtual copy of dom in (internal) memory. work correctly, integrity of copy if vital react's working.

better (but still in violation of second point):

• include different method inside component.
• which has setstate() if want re-render.
• and call method outside.

ad 2. direct reference mounted component (as thismanager does) has additional risks. react's designs , limitations there reason: maintain unidirectional flow , component hierarchy props , state, make things easy maintain.

if break pattern - building backdoor component, allows manipulation of state - break design principle of react. quick shortcut, sure cause great pain , frustation when app grows.

as far know, acceptable exceptions rule are:

• methods inside component respond ajax call results, update state (e.g. after fetching data server)
• methods inside component handle triggers direct descendent children components (e.g. run validation on form after child button has been clicked)

so if want use purpose, should fine. word of warning: standard react approach guards random access components, because invoking component or method needs have reference component. in both examples such reference available.
in setup, outside piece of code lookup ref "header" in table, , call method updates state. such indirect reference, , no way of telling source called component, code become harder debug/ maintain.