React使用jquery方式動態獲取資料

2022-04-29 07:39:08 字數 1427 閱讀 7358

好久沒寫react了,今天有空寫一下來react實現實時請求資料,並重新整理資料的小demo.

首先我還是選擇了jquery方式中自帶的ajax獲取資料,首先要引用所需的js包

接下來要寫乙個自定義的js檔案,

建立乙個react元件:

var demo = react.createclass({});

//渲染元件

react.render(,document.getelementbyid('klm'));

我在這裡往demo元件中傳人了2個引數乙個是url,是為了給ajax請求指定的請求路徑,這個settime是給定時器設定時長引數,寫在這為了後期擴充套件

接下來我們要先定義乙個初始化引數:data 用來動態存放資料的

var demo = react.createclass(

}});

這步做完之後,接下來我們要寫乙個單獨的ajax方法,去完成獲取資料操作。

var demo = react.createclass();

}.bind(this),

error:function(e).bind(this)

});},

getinitialstate:function()

}});

上面ajax請求中的url值就是剛才外面傳人的url,這步這做完了,接下來我們就是放在什麼時候開始執行這個操作,在react的生命週期中,componentdidmount是執行在渲染之後的,意思就是一旦你的元件已經執行了 render 函式,並實際將元件渲染到了 dom 中,componentdidmount 就會被呼叫。我就在這步開始做操作:

var demo = react.createclass();

}.bind(this),

error:function(e).bind(this)

});},

getinitialstate:function()

},//這個componentdidmount這個生命週期觸發在react.render完成頁面渲染之後執行

componentdidmount:function(),

render:function() --

)});

return ()}

});//渲染元件

react.render(,document.getelementbyid('klm'));

在componentdidmount方法中,我先呼叫this.getajax(); 已獲得頁面載入直接獲取資料,接著加入了setinterval定時器,開始定時重新整理資料,在頁面看效果的時候沒有傳統插入html那種重新整理的感覺,而是**資料變動了**就變。。。

這是初始化的獲取資料方式,在做單頁面場景中,有很多操作,如果牽扯到再執行請求資料,可以在建立的元件中加入新的方法去寫ajax。

react中router使用方式

react路由有兩種 browserrouter和hashrouter browserrouter原理是h5的historyapi 位址列沒有 號 通過高階元件的屬性 方式,將match,location,history以props的形式傳遞給route import from react rout...

React 中使用CSS的幾種方式

不需要元件從外部引入css檔案,直接在元件中書寫。import react,from react const div1 class test extends component render 123 div background color red div export default test 注...

jquery使用ajax方式上傳附件

一 專案上需要,要用到jquery使用ajax方式上傳附件的方式。經查詢,得到乙個名為ajaxfileupload的外掛程式。翻閱官方文件發現用法簡單。ajaxfileupload success function json 二 使用發現datatype設定成 json 時success指定的函式是...