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方法。