第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

何時(shí)使用功能setState

何時(shí)使用功能setState

何時(shí)使用功能setState在過(guò)去的幾天里,我一直在學(xué)習(xí)React,看一些關(guān)于你可以編寫(xiě)不同元素的不同方法的教程和解釋。然而,有一個(gè)我最好奇的 - setState更新/覆蓋state組件屬性的功能。例如,假設(shè)我有一個(gè)具有以下內(nèi)容的類(lèi):class Photos extends React.Component {     constructor() {         super()         state = {             pictures: []         }     }    componentDidMount() {       // This is where the fetch and setState will occur (see below)    }     render() {        return {           <div className="container">              {this.state.pictures}           </div>        }     }}這個(gè)例子看到我從API獲取圖像。鑒于我已經(jīng)為此函數(shù)執(zhí)行了我的獲取,映射和返回 - 然后我將pictures: []使用API調(diào)用中獲得的結(jié)果更新?tīng)顟B(tài)數(shù)組。我的問(wèn)題源于我見(jiàn)過(guò)的關(guān)于如何更新/覆蓋圖片狀態(tài)屬性的不同方法。我看過(guò)它有兩種不同的方式:1) 這似乎是一種非常簡(jiǎn)單易讀的方法this.setState({pictures: pics})2) 這更復(fù)雜,但我認(rèn)為它被描述為更安全的方法this.setState(prevState => ({    pictures: prevState.pictures.concat(pics)}))有人可以解釋使用其中任何一個(gè)的優(yōu)點(diǎn)嗎?我想在未來(lái)與代碼保持一致,處理道具和狀態(tài)等,所以最通用的方法當(dāng)然是首選。
查看完整描述

3 回答

?
陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

首先,在您的情況下,兩種語(yǔ)法完全不同,您可能正在尋找的是兩者之間的區(qū)別

this.setState({pictures: this.state.picture.concat(pics)})

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)}))

要理解為什么第二種方法是首選方法,您需要了解React在內(nèi)部對(duì)setState的作用。

React將首先將您傳遞的對(duì)象合并setState()到當(dāng)前狀態(tài)。然后它將開(kāi)始那個(gè)和解的事情。因?yàn)楹艚?code>setState()可能不會(huì)立即更新您的狀態(tài)。

React可以將多個(gè)setState()調(diào)用批處理為單個(gè)更新,以獲得更好的性能。

考慮一下這個(gè)簡(jiǎn)單的例子,要理解這一點(diǎn),在你的函數(shù)中你可以多次調(diào)用setState

myFunction = () => {

   ...
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})

   ...}

這不是一個(gè)簡(jiǎn)單的應(yīng)用程序中的有效用例,但隨著應(yīng)用程序變得復(fù)雜,多個(gè)setState調(diào)用可能發(fā)生在多個(gè)地方,做同樣的事情。

所以現(xiàn)在為了執(zhí)行有效的更新,React通過(guò)提取傳遞給每個(gè)setState()調(diào)用的所有對(duì)象來(lái)完成批處理,將它們合并在一起形成一個(gè)對(duì)象,然后使用該單個(gè)對(duì)象來(lái)執(zhí)行setState()。根據(jù)setState文檔

如果您嘗試在同一周期中多次增加項(xiàng)目數(shù)量,則會(huì)產(chǎn)生相當(dāng)于:

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

后續(xù)調(diào)用將覆蓋同一周期中先前調(diào)用的值,因此數(shù)量將僅增加一次。如果下一個(gè)狀態(tài)取決于先前的狀態(tài),我們建議使用更新程序功能表單

因此,如果任何對(duì)象包含相同的鍵,則存儲(chǔ)具有相同鍵的最后一個(gè)對(duì)象的鍵的值。因此更新只發(fā)生一次最后一個(gè)值

演示代碼盒


查看完整回答
反對(duì) 回復(fù) 2019-08-28
?
撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊

快速回答:

始終使用setState()的函數(shù)形式。

this.setState((state, props)=>({
    someValue: state.somevalue + 1}));

這種方法不易出錯(cuò),有助于消除一些非常難以發(fā)現(xiàn)的錯(cuò)誤。即使react批處理多個(gè)此類(lèi)更新,每個(gè)更新都是單獨(dú)的函數(shù)調(diào)用,后續(xù)更新不會(huì)導(dǎo)致某些更新丟失。

另一種方法

this.setState({someValue: state.somevalue + 1});

如果頻繁重復(fù),可能會(huì)導(dǎo)致某些更新丟失,因?yàn)镽eact會(huì)批量處理此類(lèi)頻繁更新。


查看完整回答
反對(duì) 回復(fù) 2019-08-28
  • 3 回答
  • 0 關(guān)注
  • 777 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)