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è)值

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)頻繁更新。
- 3 回答
- 0 關(guān)注
- 777 瀏覽
相關(guān)問(wèn)題推薦
添加回答
舉報(bào)