React 實踐1

標籤：

寫前面 

自從聽聞React出世後那陣子 就學了相關的知識 可是一直沒有機會實踐過！  都已經過了大半年了 再不操刀 可不行！

下面的demo 可以說canvas 來做比較靠譜  但是！

我就要用dom來實現 咱的目的是來實踐React的 ！

 

我是demo

 

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

：

我們將介面分解成組件形式

這些組件外面 還有個包裹他們的 MotionSegment組件

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

代碼的基礎結構：

初始化

 1 import MotionSegment from ‘./MotionSegment‘; 2  3 _$(()=>{ 4  5     const c = _$.color(‘rgb‘,{to_number:1}); 6  7     const prop = { 8         sgm_head : { 9             radius : 5010             ,color : c11         }12         ,sgm_body : {13             nums : 2314             ,width : 515             ,height : 116             ,color : c17         }18         ,cir_enemy :{19             radius : 8020             ,nums : 1021         }22     };23 24     React.render(25         <MotionSegment {...prop}/>26         ,_$(‘#place‘)[0]27     );28 29 });

傳遞參數對象給MotionSegment  再渲染到#place元素中

 

MotionSegment 組件

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>                    )    }        //...});export default MotionSegment;

MotionSegment 含有3個子組件 SegmentControl CirEnemyControl ScoreBoard 

*有個Ev 全域對象 這個用來控制組件之間的通訊用  組件通訊有幾種方法 。如 傳callback 、context 、還有redux等。。

我選用 訂閱/發布模式 做通訊 ，對於這個demo足夠用！

redux 適合大型的應用 ，其他幾種我不喜歡= =

 

SegmentControl組件

import SegmentHead from ‘./SegmentHead‘;import SegmentBody from ‘./SegmentBody‘;const SegmentControl = React.createClass({  render(t){    //...    return(      <div>        <SegmentHead {...this.props.sgm_head} mouse={this.props.mouse}/>        <SegmentBody {...this.props.sgm_body} mouse={this.props.mouse}/>      </div>    )  }    //...});export default SegmentControl;

SegmentHead組件

import Ev from ‘./Ev‘;const Ev_Type = {    ‘sh/pos‘ : ‘SegmentHead/pos‘};const SegmentHead = React.createClass({    render(){        //...        return (            <div style={stys}></div>        )    }    //...});export default SegmentHead;

 

SegmentBody組件

import Segment from ‘./Segment‘;const SegmentBody = React.createClass({    render(){        //...        return (            <div>                {                    body_data.map((v,i)=>{                        return <Segment key={i} {...body_data[i]}  height={height}/>                    })                }            </div>        )    }    //...});export default SegmentBody;

 

Segment組件

const Segment = React.createClass({    render(){        //...        return(            <div style={stys}></div>        )    }    //...});export default Segment;

CirEnemyControl組件

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>        )    }    //...});export default CirEnemyControl;

CirEnemy組件

import Ev from ‘./Ev‘;const Ev_Type = {  ‘ce/pos‘ : ‘CirEnemy/pos‘  ,‘ce/click‘ : ‘CirEnemy/click‘};const CirEnemy = React.createClass({  //...  render(){        return(      <div  style={stys}></div>    )  }  //...});export default CirEnemy;

最後個計分的ScoreBoard

import Ev from ‘./Ev‘;const Ev_Type = {    ‘cec/addScore‘ : ‘CirEnemyControl/addScore‘    ,‘cec/success‘ : ‘CirEnemyControl/success‘}const ScoreBoard = React.createClass({
　　//...    render(){        var s = `${this.state.score}/${this.props.nums}`;        this.state.complete && (s=‘都被你吃完啦~‘);        return(            <h1 style={this.props.stys}>{s}</h1>        )    }
　　//...});export default ScoreBoard;

大致結構就上面這樣子了~

 

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

有幾個的關鍵的地方講講

1 組件之間如何通訊的？

2 渲染何時進行的？

3 那個長的像蛇的是怎麼做的？ dom都能做？

 

 

1、關於通訊 一開始我用的傳統callback傳遞來實現父子和姐妹之間的通訊。。後面發現套了2層就挺煩了 之後又試了其餘幾種 決定還是用訂閱發布靠譜

接受訊息我統統放到componentDidMount 之中  比如 在記分組件 具體就在

import Ev from ‘./Ev‘;const Ev_Type = {    ‘cec/addScore‘ : ‘CirEnemyControl/addScore‘    ,‘cec/success‘ : ‘CirEnemyControl/success‘}//...const ScoreBoard = React.createClass({    //...    ,componentDidMount(){        Ev.on(Ev_Type[‘cec/addScore‘],this.onAddScore);        Ev.on(Ev_Type[‘cec/success‘],this.onSuccess);    }});export default ScoreBoard;

 CirEnemyControl如果發布了訊息  ScoreBoard就會接受到了。

 

2、在根組件MotionSegment  開個主迴圈 即時的傳遞滑鼠座標位置和時間戳記 渲染工作也順便做了。。

,componentDidMount(){        const T = _$.Timer;        //...        T.execute();        T.loop(t=>{            this.setState({                mouse : mouse                ,t : t            });        });                //...    }

 

3、這個玩意屬於骨骼動畫了  用canvas做靠譜 這裡是用dom實現的 有了些多餘的計算  主要是處理身體部分 其實就是N個節段的組合 利用上個節段的座標位置 遞迴計算 需要點處理技巧。。

我之後專門放到canvas裡去討論 此篇主要是來實踐React的 先不說~~~

 

*React實踐還很少 不能說寫的有多好 但終歸完成了

有不對 或不嚴謹的地方 懇請指正！

 

 

React 實踐1