6 react中的互動

2022-08-23 22:33:09 字數 1143 閱讀 4651

1.ajax

再react中使用ajax和直接使用ajax的用法是完全一樣的,只要找好路徑即可,但是也有不一樣的地方,再react中是通過改變狀態state來達到讓元件重新渲染的效果,並且放ajax的鉤子函式一般會放在例項化期的componentdidmount中,因為再這個時候真實已經渲染完成了(再寫的時候資料請求過來之後直接讓請求回來的資料載入到dom中)不管是同源也好還是跨域也好都可以使用ajax來完成實現

$.ajax(,

datatype:"json",

success:

function

(rel))

}.bind(this), //注意點 需要用

bind(this) 找到當前元件中的this

error:

function

() // })

2.fetch

1、fetch:時基於原生得xmlhtpprequest物件來實現得資料請求,同時fetch也是基於promise物件實現呼叫得

fetch得本質就是實現ajax得封裝和pormise得實現

fetch再請求資料之後會返回乙個promise物件,對於promise物件來說,它有成功resolve和失敗reject兩個結果,只要有返回資料得話那麼promise就返回得時resolve,只有再網路錯誤或請求被阻止得話才會返回reject

因為fetch返回得是乙個promise物件,對於promise物件來說再處理返回得資料得時候使用得是then方法進行處理得,所以對於fetch來說也是用得是then方法對資料進行處理得

2、fetch需要配置得引數:

url:請求得路徑

method:請求方式

datatype:返回得資料型別

body:提交得資料,需要使用json.stringify()轉化成json格式得字串

then:**函式進行處理得

請求回來得資料需要使用json()方法進行解析才能獲取這些資料

mode:請求得放式是否跨域

headers:設定得是請求得頭部資訊

fetch("url",)

}).then((response)=>).then((res)=>)

console.log(res)

})

6 react 事件繫結

1.事件繫結方式一 全域性方法返回react dom 方式繫結 function actionlink 使用 onclick 繫結事件 return click me var element actionlink 返回乙個reactdom class parent extends react.com...

React中的es6語法

在今年對 instagram web 進行全新的設計的時候,我喜歡在寫 react 元件的時候,用上一些 es6 的新特性。請允許我列舉這些能夠改變你寫 react 應用方式的新特性。比起以往,這些特性能夠使你擼起碼來更加容易 有趣!使用 es6 來編寫 react 元件最明顯的變化就是我們定義元件...

react 父子元件之間的互動傳值

子元件要呼叫父元件的方法 父元件傳入子元件要調的方法 this.fun.bind this 子元件可通過props直接呼叫 this.props.fun xx 父元件要呼叫子元件的方法 父元件中給子元件設定onref事件,並設定呼叫名 ref this.child ref 子元件中在componen...