react相關資料

react 官網：

http://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

中文官網

http://www.css88.com/react/index.html

react模塊間的傳遞

http://www.alloyteam.com/2016/01/some-methods-of-reactjs-communication-between-components/

 

阮一峯react用法詳解

http://www.ruanyifeng.com/blog/2015/03/react.html

 

組件間的通訊

http://reactjs.cn/react/tips/communicate-between-components.html

 

 

react 視頻學習網

http://www.hubwiz.com/course/552762019964049d1872fc88/

 

 

//建立一個新的模塊

var SelectGamelist = React.createClass({}）

 

 

  // 模塊中全局屬性

          //當有數據變更，須要從新渲染頁面時用state

getInitialState : function () {

            return {

                dataList : [],

                pageIndex: this.props.pageIndex,

                maxPageNo : 0

            };

   },

 

 

     //沒有數據變更，不須要從新渲染頁面時用pops

getDefaultProps : function () {

            return{

                title : "提示" ,

                content : "啊，主銀，你的網掛掉了！啊，主銀，你的網掛掉了！"

            }

        },

 

 

//渲染頁面

render : function () {

            var self = this;

            var dataList = self.state.dataList; //整體數據

            var result = [];// 臨時數組

 

            dataList.forEach(function( item ,index){ //遍歷數組

                result.push(     // 將須要循環的結構和數據 添加到臨時數組中

                    <li data-gid={item.id} data-logo={item.logo} onClick={self.clickList} data-name={item.game_name} >

                        <div className="gamelist-icon">

                            <img src={item.logo} />

                        </div>

                        <div className="gamelist-count">

                            <div className="gamelist-contitle">{item.game_name}</div>

                            <div className="gamelist-peoples">{item.max_player}人正在對戰</div>

                            <div className="gamelist-prompt">{item.teach_text}</div>

                        </div>

                    </li>

                )

 

            });

            return (

                <ul className="gamelist-list">{result}</ul>  // 將臨時數組渲染到結構中

            )

        },

 

 

//獲取數據

getGameList: function () {

            var self = this;

            socketFlow.getGameList({

                pageIndex: this.state.pageIndex, //傳出的值

                pageNo: 5

            } , function (res) {

                self.setState({

                    dataList : res.gameList, //將獲取到的數據設置成全局數據

                    maxPageNo : res.page_num

                });

 

            });

        },

 

//點擊時觸發的事件

clickList : function (e) {

            var self = this ;

            var el = $(e.currentTarget);

            var gid = el.attr('data-gid');

            var name = el.attr('data-name');

            var logo = el.attr('data-logo');

            this.props.onSelectGame(gid , name ,logo);  //設置成全局的事件方便調用

  }

 

 

 

 

// 上一頁下一頁

 

var SelectGame = React.createClass({

        getInitialState: function(){

            return {

                showPopup: 0,

                pageIndex: 0,

                notEnd: true,

                notFirst : true,

                gid: 0 ,

                name : ""

            };

        },

        render : function () {

            var self = this;

 

            var lastCls = 'gamelist-btnleft', nextCls = 'gamelist-btnright’; //設置class參數

            var showCls = 'gamelist-wrap'

           

            if (this.state.showPopup == 1 ) {

                showCls += ' hidden'

            };

           

            return (

                    <div className={showCls}>

                        <div className="gamelist-pop">

                            <b className="gamelist-close" onClick={self.clickclose}></b>

                            <h1>遊戲列表</h1>

                            <div className="gamelist-listbox">

                                <SelectGamelist ref="gamelist" pageIndex={this.state.pageIndex} onSelectGame={this.props.onSelectGame}  /> //添加事件屬性

                            </div>

                            <div className="gamelist-btns">

                                <div className="gamelist-btnbox">

                                    <div className="gamelist-btnleft"  data-id="last" onClick={self.getLast.bind(this)}></div> // 事件有變動

                                    <div className="gamelist-btnright btn-on"  data-id=「next" onClick={self.getNext.bind(this)}></div>

                                </div>

                            </div>

                        </div>

                    </div>

                );

        },

        getNext : function (e) {

            var self = this;

            var pageIndex = this.state.pageIndex + 1;

 

            var maxPageNo = this.refs.gamelist.state.maxPageNo - 1;

            var notEnd = this.state.notEnd ;

            var el = $(e.currentTarget);

 

            this.setState({

                notFirst : true

            });

            if (pageIndex>=maxPageNo) {

                $('[data-id=next]').removeClass("btn-on");

                this.setState({

                    notEnd: false

                });

            };

            if (notEnd) {

                $('[data-id=last]').addClass("btn-on");

 

                this.setState({

                    pageIndex: pageIndex

                });

            };

 

 

        },

        getLast : function (e) {

            var self = this;

            var pageIndex = this.state.pageIndex - 1;

            var notFirst = this.state.notFirst ;

            var el = $(e.currentTarget);

 

           

            if (!el.hasClass('btn-on')) {

                return;

            }

            this.setState({

                notEnd : true

            });

            if (pageIndex<=0) {

                $('[data-id=last]').removeClass("btn-on");

                this.setState({

                    notFirst: false

                });

 

            };

            if (notFirst) {

                $('[data-id=next]').addClass("btn-on");

                this.setState({

                    pageIndex: pageIndex

                });

            };

 

 

 

        }

    });

 

// 分享 組件調用

 

_url = self._url = _url.replace(location.hash , '#result’); //不是在本方法裏的參數，設置成這個模塊公用的變量

 

share : function () { // 分享模塊

            var self = this ;

            var pl = env.sourse;

            if (pl == 2001) { //碰碰內部時調用組件中的分享彈窗

                client.share.invoke();

            } else {

                self.showPOP() // 非碰碰時調用分享組件

            };

 

        },

        showPOP : function (){ //渲染分享組件

            var temp = this._temp = $('<div id="temWarp"></div>’); //建立一個新的Dom 結構

            $(document.body).append(temp); //將新節點插入body

 

 

            React.render(<SharePop url={this._url} popClose={this.popClose} /> , temp[0]) //渲染模塊組件

        },

        popClose : function () { //組件中暴漏出的函數

            var self = this ;

            React.unmountComponentAtNode(self._temp[0]); //銷燬節點中的模塊

            self._temp.remove(); //移除節點

        },

 

 

 

//模塊中的通訊

 

從父模塊中調取子模塊數據

//在子模塊中定義全局屬性（函數）

this.props.onSelect(value);

// 在父模塊中加入模塊 

<div className=「wrap>

     <Select select={this.select} />

  

//給子模塊取名（在父模塊中調用子模塊是使用）

<Siblings ref='[name]’  />

</div>

 

//在父模塊中寫函數

select : function(value){

     //將從子模塊中取到的值取出並設置爲父模塊的全局屬性（在父模塊中設置子模塊用ref）

     this.refs.vale.setState({

          value: value

     })

}

 

 

 

子模塊從父模塊中取數據（或事件）

 

     //父模塊中引用子模塊，同時把子模塊須要的數據穿以參數的形式傳遞出去

 

<List item={data} />

 

     //子模塊中設置prop或state，作爲模塊中自用的全局屬性

getDefaultProps : function () {

            return {

                item : {},

                replay : function () {},

                share : function () {}

            };

   }

          //在子模塊的分類中調用全局屬性

render : function () {

       var self = this;

        var item = self.props.item;

      

}

 

 

子組件改變父組件數據

 

     //子模塊定義一個子模塊的全局函數將數據以參數的形式傳入函數中

this.props.postData(data);

 

      //父模塊調用時寫入函數

<List getData = {self.onData} />

 

     //父函數寫入函數並設置參數爲父函數全局屬性

onData: function(){

this.State({

     Data :data

})