ReactJS學習筆記(二)

1.Ajax: componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法從新渲染 UI。

/*demo1*/

var Demo1Box=React.createClass({

    getInitialState:function(){

        return{

            username:'',

            lastGistUrl:''

        };

    },

    componentDidMount:function(){

        $.get(this.props.url,function(result){

            var lastGist = result[0];

            if (this.isMounted()) {

                this.setState({

                  username: lastGist.owner.login,

                  lastGistUrl: lastGist.html_url

                });

            }

        }.bind(this));

    },

    render:function(){

        return (

            <div>

                {this.state.username}

                <a href={this.state.lastGistUrl}>here</a>

            </div>

        )

    }

});

ReactDOM.render(

    <Demo1Box url="https://api.github.com/users/octocat/gists" />,

    document.getElementById('demo1')

);

2.利用promise實現ajax（！由於promise是異步的，因此render時要檢測）

html：<div id='demo2'></div>

JS：

/*demo2*/

var Demo2Box=React.createClass({

    getInitialState:function(){

        return {data: null};

    },

    componentDidMount:function(){

        this.props.promise.then(

            value => this.setState({ data: value})

          );

 

    },

    render:function(){

        console.log(1);

        console.log(this.state.data);

        console.log(2);

        if(this.state.data){

            console.log(1);

            console.log(this.state.data);

            console.log(2);

            console.log(this.state.data.items);

            var items=this.state.data.items;

            var datalist=items.map(function(items){

                return (

                    <li>

                        {items.html_url},

                        {items.name}

                    </li>

                )

            });

            return (

                <ul>

                    {datalist}

                </ul>

            );

        }

        return (

            <ul>

            </ul>

        );

    }

});

ReactDOM.render(

    <Demo2Box promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,

    document.getElementById('demo2')

);

3.組件間回調函數

html：<div id='demo3'></div>

JS：

var Demo31Box=React.createClass({

    render:function(){

        return(

            <button onClick={this.props.clickCallback}>點我獲取全名</button>

        )

    }

});

 

var Demo32Box=React.createClass({

    getFullName:function(){

        alert("全名是lili");

    },

    render:function(){

        return (

            //調用外部組件並傳遞迴調方法

            <Demo31Box clickCallback={this.getFullName} />

        )

    }

});

ReactDOM.render(

    <Demo32Box />,

    document.getElementById('demo3')

);

4.Mixins，將Mixins對象上的方法混合到另外一個調用的組件，做用和$.extend方法的做用類似。Mixins對象有幾個特色：

1. )在mixin中寫的生命週期相關的回調都會被合併，也就是他們都會執行，而不會互相覆蓋掉。會先執行 mixin ，最後執行組件的 。

2.）mixin沒有render方法。