好久沒寫react了,今天有空寫一下來react實現實時請求資料,並重新整理資料的小demo.
首先我還是選擇了jquery方式中自帶的ajax獲取資料,首先要引用所需的js包
接下來要寫乙個自定義的js檔案,
建立乙個react元件:
var demo = react.createclass({});我在這裡往demo元件中傳人了2個引數乙個是url,是為了給ajax請求指定的請求路徑,這個settime是給定時器設定時長引數,寫在這為了後期擴充套件//渲染元件
react.render(,document.getelementbyid('klm'));
接下來我們要先定義乙個初始化引數:data 用來動態存放資料的
var demo = react.createclass(這步做完之後,接下來我們要寫乙個單獨的ajax方法,去完成獲取資料操作。}});
var demo = react.createclass();上面ajax請求中的url值就是剛才外面傳人的url,這步這做完了,接下來我們就是放在什麼時候開始執行這個操作,在react的生命週期中,componentdidmount是執行在渲染之後的,意思就是一旦你的元件已經執行了 render 函式,並實際將元件渲染到了 dom 中,componentdidmount 就會被呼叫。我就在這步開始做操作:}.bind(this),
error:function(e).bind(this)
});},
getinitialstate:function()
}});
var demo = react.createclass();在componentdidmount方法中,我先呼叫this.getajax(); 已獲得頁面載入直接獲取資料,接著加入了setinterval定時器,開始定時重新整理資料,在頁面看效果的時候沒有傳統插入html那種重新整理的感覺,而是**資料變動了**就變。。。}.bind(this),
error:function(e).bind(this)
});},
getinitialstate:function()
},//這個componentdidmount這個生命週期觸發在react.render完成頁面渲染之後執行
componentdidmount:function(),
render:function() --
)});
return ()}
});//渲染元件
react.render(,document.getelementbyid('klm'));
這是初始化的獲取資料方式,在做單頁面場景中,有很多操作,如果牽扯到再執行請求資料,可以在建立的元件中加入新的方法去寫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指定的函式是...