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

时间:2022-12-09 16:24:01

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

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

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

 接下来要写一个自定义的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。