真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

react中獲取state的方法

這篇文章將為大家詳細講解有關react中獲取state的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都網(wǎng)站制作、網(wǎng)站設計、外貿網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的南豐網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!

react中獲取state的方法:首先打開相應的react代碼文件;然后在react中可以通過“this.state.{屬性}”的方式直接獲取state即可。

react中獲取state的方法

react中怎么獲取state?

在react中可以通過this.state.{屬性}的方式直接獲取state,但是當我們修改state的時候,往往有許多的坑需要注意。

以下為三種常見的陷阱:

1、不能直接修改state。

組件修改state,并不會重新觸發(fā)render。列如:

//錯誤
this.state.title='React';
正確修改方式是使用setState();
//正確
this.setState({title:'React'});

2、state的更新時異步的

調用setState時,組件state并不會立即改變,只是把要修改的狀態(tài)放入事件隊列當中,而react會優(yōu)化真正的執(zhí)行時機,并且處于本身的性能原因,可能會將多次setState的狀態(tài)修改合并成一次狀態(tài)修改。因此不要依靠當前的state計算下一個state,因為當真正執(zhí)行狀態(tài)修改時,依賴的this.state并不能保證是最新的state,因為react本身會把多次state合并成一次,這時this.state還是幾次state修改前的state,同樣也不能依賴當前的props計算下一個狀態(tài),因為props的更新也是異步。列對于電商類的應用中,在購物車里,點擊一次購買按鈕,購買數(shù)量會加1,如果連續(xù)點擊兩次,會加2,而在react合并修改為一次的情況下,相當與執(zhí)行了如下代碼:

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

于是后面覆蓋前面的操作,最終購買數(shù)量只加1,此時可以使用另一個函數(shù)作為參數(shù)的setState,這個函數(shù)有兩個參數(shù),第一個參數(shù)是當前的最新狀態(tài)(本次組件狀態(tài)更新后的狀態(tài))的前一個狀態(tài)preState(本次組件狀態(tài)修改前的狀態(tài)),第二個參數(shù)是當前最新的props。示列如下:

//正確
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3、state的更新時一個合并的過程

當調用ssetState()修改組件的狀態(tài)時,只需要傳入發(fā)生改變的state,而不是完整的state,因為組件state的更新時一個合并的過程,列如,一個組件的狀態(tài)為:

this.state({
title:'React',
content:'React is an wondeful JS library'
})

當只需要修改title時,只需要將修改的title傳給setState即可:

this.setState({title:'ReactJs'});

react會合并最新的title到原來的狀態(tài),同時保留原來狀態(tài)的content,最終合并state為:

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
}

關于“react中獲取state的方法”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。


名稱欄目:react中獲取state的方法
URL分享:http://weahome.cn/article/jspceh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部