Some ideas for react component rendering

Recently, I've been thinking about a problem, how can data be passed when react's unidirectional data flow faces a deep-seated set of components (the component returned by the Redux Connect method, which is a complete feature)??? Redux help us solve what problem???

I used redux+react and found that Redux did not solve the data transfer problem between the react components. The cumbersome callback that only centers the data and avoids the parent component's data, adds three troublesome actions, reducer, mapstateprops. Complex processing flow: A new piece of data is added to the action, reducer needs to add a method to the data processing (typically merging data, patchwork the maintenance of a little bit of difficulty), and then passed to the component by Mapstateprops filtering. A very simple operation with the Redux will become very complex (disgusting to explode)! Sometimes you just want to change the state of a subassembly in a component collection, and after dispatch he will render the entire assembly from start to finish (much wasted performance), although it can solve the performance problem through componentshouldupdate, but feel good trouble! But we can also connect once for each component that needs to change state independently, so that connect is very frequent, and the code sinks, and the action is more difficult to organize.

Redux Data Center I feel really unnecessary, because the data that the view and view display has to be tied together. Redux after separating the data from the view, it's hard to read: first, to see how the component's Events update data---> How to find updated data in action (view data source)---> and then see what Reducer did (good trouble, hard to track, and the benefits of data-centric I did not find it, I prefer an event with intuitive data manipulation. So I never understood why the data should be centralized as a front end.

I thought for a long time and found a collection of components (a complete feature) in general, you only need to initialize the data once. The interaction of a component typically does not change all states in the component collection, and an interaction changes only one or two sub-component states in the component's collection. So I hope that when I need to change the state of a component, I can change the state of that component directly. In this way, the frequent data transfer between components will be reduced, only when the data initialization may require deep data transfer, how to do it??? My idea is to collect all the this.setstate () methods of the entire page into a global variable that is provided to all component calls to that page, and the initialization data is passed by This.props! All data in the This.props can be used as the initial state of the component, or it can be initialized by initdata the property.

//collectsetstate.js
1Import{component} from "React";2 //change the React base class, set the default constructor3Exportdefaultclass Newcomponent extends component{4 Constructor (props) {5 super (props);6Getsetstate.call ( This);7     }8 }9 //collect so the SetState methodTenExportfunctiongetsetstate () { One      This. state=this.props.initdata| | This. Props; //Set initialization data for this component  AWindow. Rx=window. Rx?window. rx:{};
Let Name=this.constructor.name; -Window. Rx[name]= (callback) ={ //named SetState method with component name
　　　　　　　Window. Rx[name].getstate= () =>this.state;
 -          This. SetState (Object.assign ({}, This. State,callback.call ( This))); //combination  State the     } -}

Example:

1Import reactdom from "React-dom";2Import React from "React";3Import Component,{getsetstate} from ".Collectsetstate.js";//The modified base class component (the construction method will default collect the component's SetState method)4 class App01 extends component{5 Constructor (props) {6 super (props);7Getsetstate.call ( This)//SetState methods can be collected through getsetstate when custom constructs8     }9 render () {Ten         return This.state.content} One     } A } - class App02 extends component{ - Mapchild () { the         return  This. State.data.map (Item) ={ -             return<p>{item+ This.state.content}</p>; -         }) -     } + render () { -         return<div> +&LT;H1 >{ This.state.content} A{ This. Mapchild ()} at</div> -                 ; -     } - } - class Controller extends component{ - ClickHandler (e) { inRx[e.target.value] (function(){//Use the collected SetState method according to the component name -             return { toContent: ( This. state.content+1) | | 0,//returns the modified state +             } -         }) the     } * render () { $         return<div>Panax Notoginseng<input type= "button" value= "App01" onclick={ This. Clickhandler.bind ( This)}/> -<input type= "button" value= "APP02" onclick={ This. Clickhandler.bind ( This)}/> the</div>; +     } A } the Reactdom.render ( +<div> -<controller/> $<app01 Content={1}/>//Initialize data on props $&LT;APP02 content={2} initdata={[1,2,3,4,5]}/> -</div>, -document.getElementById ("Container") the)

Finally, I hope you can give me a lot of guidance. Just learn soon, probably to react and redux understanding is not enough cut, still not clear the disadvantage of this idea where!!! Ask for advice ...

　　

Some ideas for react component rendering