React使用jquery方式动态获取数据

好久没写react了，今天有空写一下来react实现实时请求数据，并刷新数据的小demo.

首先我还是选择了jquery方式中自带的ajax获取数据，首先要引用所需的js包

接下来要写一个自定义的js文件,

创建一个react组件：

var Demo = React.createClass({});

//渲染组件
React.render(<Demo url="../data/package.json" setTime="2000" />,document.getElementById('klm'));

我在这里往Demo组件中传人了2个参数一个是url,是为了给ajax请求指定的请求路径，这个setTime是给定时器设置时长参数，写在这为了后期扩展

接下来我们要先定义一个初始化参数：data 用来动态存放数据的

var Demo = React.createClass({
     getInitialState:function(){
        return {data:[]}
    }
});

这步做完之后，接下来我们要写一个单独的ajax方法，去完成获取数据操作。

var Demo = React.createClass({
     getAjax:function(){
        $.ajax({
            url:this.props.url,
            dataType:'json',
            success:function(data){
                this.setState({data:data});
            }.bind(this),
            error:function(e){
                console.log(e.toString());
            }.bind(this)
        });
    },

    getInitialState:function(){
        return {data:[]}
    }

});

上面ajax请求中的url值就是刚才外面传人的url，这步这做完了，接下来我们就是放在什么时候开始执行这个操作，在react的生命周期中，componentDidMount是执行在渲染之后的，意思就是一旦你的组件已经运行了 render 函数，并实际将组件渲染到了 DOM 中，componentDidMount 就会被调用。我就在这步开始做操作：

var Demo = React.createClass({
    getAjax:function(){
        $.ajax({
            url:this.props.url,
            dataType:'json',
            success:function(data){
                this.setState({data:data});
            }.bind(this),
            error:function(e){
                console.log(e.toString());
            }.bind(this)
        });
    },

    getInitialState:function(){
        return {data:[]}
    },

    //这个componentDidMount这个生命周期触发在React.render完成页面渲染之后执行
    componentDidMount:function(){
       this.getAjax();
        setInterval(this.getAjax,this.props.setTime)
    },
    render:function(){
        var li = this.state.data.map(function(data){
            return (
                <li>{data.author} -- {data.text}</li>
            )
        });
        return (
            <ul>
                {li}
            </ul>
        )
    }
});

//渲染组件
React.render(<Demo url="../data/package.json" setTime="2000" />,document.getElementById('klm'));

在componentDidMount方法中，我先调用this.getAjax(); 已获得页面加载直接获取数据，接着加入了setInterval定时器，开始定时刷新数据，在页面看效果的时候没有传统插入HTML那种刷新的感觉，而是哪里数据变动了哪里就变。。。

这是初始化的获取数据方式，在做单页面场景中，有很多操作，如果牵扯到再执行请求数据，可以在创建的组件中加入新的方法去写ajax。