React Practice 1

Write the front

Since the hearing of react born smoked many learned the relevant knowledge but has never had the opportunity to practice! have been over the past six months, not fencing can not!

The following demo can be said canvas to do more reliable but!

I'm going to use DOM to achieve our goal is to practice react!

I'm the demo.

------------------------------------------------------------

：

We break down the interface into component form

There's a package of motionsegment components outside these components.

------------------------------------------------------------

The underlying structure of the code:

Initialization

1Import motionsegment from './motionsegment ';2 3_$ (() ={4 5Const C = _$.color (' RGB ', {to_number:1});6 7CONST PROP = {8 Sgm_head: {9Radius:50Ten , Color:c One         } A , Sgm_body: { -Nums:23 -, Width:5 the, height:1 - , Color:c -         } - , Cir_enemy: { +Radius:80 -, Nums:10 +         } A     }; at  - React.render ( -<motionsegment {...prop}/> -, _$ (' #place ') [0] -     ); -  in});

Passing the Parameter object to the motionsegment and rendering it to the #place element

Motionsegment components

Import Segmentcontrol from './segmentcontrol '; import Cirenemycontrol from'./cirenemycontrol '; import Scoreboard from'./scoreboard '; import Ev from'./ev '; Const Motionsegment=React.createclass ({render () {//.....        return (            <div Style={c}> <Segmentcontrol Sgm_head={ This. Props.sgm_head} sgm_body={ This. Props.sgm_body} mouse={ This. State.mouse}/> <cirenemycontrol {... This. Props.cir_enemy} t={ This.state.t}/> <scoreboard nums={ This.props.cir_enemy.nums}/> </div>                    )    }        //...}); exportdefaultMotionsegment;

Motionsegment contains 3 sub-components Segmentcontrol Cirenemycontrol Scoreboard

* There is an EV global object this is used to control communication between components using component communication in several ways. such as transmission callback, context, and redux, etc...

I use the subscription/release mode to do communication, for this demo is enough!

Redux is suitable for large-scale applications, other types I do not like = =

Segmentcontrol components

 import Segmenthead from './segmenthead ' ;import segmentbody from  './ Segmentbody ' ;const segmentcontrol  = React.createclass ({render (t) { //  ...  return   ( <div> <s Egmenthead {... this . Props.sgm_head} mouse={this . Props.mouse}/> <segmentbody {... this . Props.sgm_body} mouse={this . props.mouse}/> </div> // ...   default  Segmentcontrol; 

Segmenthead components

Import Ev from './ev '= {    ' sh/pos ': ' segmenthead/pos '= React.createclass ({    Render () {        //...        return (            <div style={stys}></div>        )    }    //... default segmenthead;  

Segmentbody components

Import Segment from './segment '= React.createclass ({    render () {        //...        return (            <div>                {                    body_data.map (v,i)={                        return <segment Key={i} {... body_data[i]} height={height}/>}              )</div>         )    }     // ...  default segmentbody;

Segment Components

Const Segment = React.createclass ({    render ()}        {//...        return (            <div style={stys}></div>        )    }    //...  default Segment;

Cirenemycontrol components

Import Ev from './ev '; import Cirenemy from'./cirenemy '; Const Ev_type= {    ' Sh/pos ': ' Segmenthead/pos '    ,' Ce/pos ': ' Cirenemy/pos '    ,' Cec/addscore ': ' Cirenemycontrol/addscore '    ,' cec/success ': ' cirenemycontrol/success '} const Cirenemycontrol=React.createclass ({render () {//....        //        return(            <div>{pos_data.map (data,i)={                        return<cirenemy Key={i} i = {i} t={ This. props.t} {... data}/>                    })                }            </div>        )    }    //...}); exportdefaultCirenemycontrol;

Cirenemy components

Import Ev from './ev '= {  ' ce/pos ': ' Cirenemy/pos '  ,' ce/click ': ' Cirenemy/click '  = react.createclass ({  //...   render () {        return(      <div  style={stys}></div>     )  }  //...  default cirenemy;

The last scoring scoreboard

Import Ev from './ev '= {    ' cec/addscore ': ' Cirenemycontrol/addscore '    ,' cec/ Success ': ' cirenemycontrol/success '= React.createclass ({
//...    Render () {        var s = ' ${this. state.score}/${this.props.nums} ';        this. State.complete && (s= ' Are you finished eating ~ ');         return (            
this .props.stys}>{s}        )    }
default Scoreboard;

The approximate structure is like this.

-------------------------------------------

There are a few key places to talk about

1 How are components communicated?

2 When did the rendering take place?

3 What's that long snake like? Dom can do?

1, about the beginning of communication I used the traditional callback transfer to achieve the communication between father and sister. After the discovery of a 2-storey set is very annoying, and then try the remaining several decisions or subscribe to publish a reliable

Accept the message and I'll put it in the componentdidmount. For example, the scoring component is specific

Import Ev from './ev '= {    ' cec/addscore ': ' Cirenemycontrol/addscore '    ,' cec/ Success ': ' cirenemycontrol/success '= react.createclass ({    //...     , Componentdidmount () {        ev.on (ev_type[' Cec/addscore '),this. Onaddscore);        Ev.on (ev_type[' cec/success '),this. onsuccess);     default Scoreboard;

Cirenemycontrol If you publish the message, scoreboard will accept it.

2, in the root component Motionsegment open a main loop real-time transfer mouse coordinate position and timestamp rendering work also by the way.

, Componentdidmount () {        = _$. Timer;         // ...         T.execute ();        T.loop (t==            {This. SetState ({                mouse:mouse                , T:t            });        });                //...    }

3, this thing belongs to the skeleton animation to do with the canvas to do with the use of the DOM here is a few redundant calculation is mainly to deal with the body part is actually a combination of n sections using the last section of the coordinate position recursive calculation needs point processing skills.

I then specifically put in the canvas to discuss this article is mainly to practice react first not to say ~ ~ ~

*react practice is very rare to say how good it is to write, but it's finished.

Where there is a wrong or not strict, please correct me!

React Practice 1