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。