亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

何時使用功能setState

何時使用功能setState

何時使用功能setState在過去的幾天里,我一直在學習React,看一些關于你可以編寫不同元素的不同方法的教程和解釋。然而,有一個我最好奇的 - setState更新/覆蓋state組件屬性的功能。例如,假設我有一個具有以下內容的類: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>        }     }}這個例子看到我從API獲取圖像。鑒于我已經為此函數執行了我的獲取,映射和返回 - 然后我將pictures: []使用API調用中獲得的結果更新狀態數組。我的問題源于我見過的關于如何更新/覆蓋圖片狀態屬性的不同方法。我看過它有兩種不同的方式:1) 這似乎是一種非常簡單易讀的方法this.setState({pictures: pics})2) 這更復雜,但我認為它被描述為更安全的方法this.setState(prevState => ({    pictures: prevState.pictures.concat(pics)}))有人可以解釋使用其中任何一個的優點嗎?我想在未來與代碼保持一致,處理道具和狀態等,所以最通用的方法當然是首選。
查看完整描述

3 回答

?
陪伴而非守候

TA貢獻1757條經驗 獲得超8個贊

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

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

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

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

React將首先將您傳遞的對象合并setState()到當前狀態。然后它將開始那個和解的事情。因為呼叫setState()可能不會立即更新您的狀態。

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

考慮一下這個簡單的例子,要理解這一點,在你的函數中你可以多次調用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)})

   ...}

這不是一個簡單的應用程序中的有效用例,但隨著應用程序變得復雜,多個setState調用可能發生在多個地方,做同樣的事情。

所以現在為了執行有效的更新,React通過提取傳遞給每個setState()調用的所有對象來完成批處理,將它們合并在一起形成一個對象,然后使用該單個對象來執行setState()。根據setState文檔

如果您嘗試在同一周期中多次增加項目數量,則會產生相當于:

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

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

因此,如果任何對象包含相同的鍵,則存儲具有相同鍵的最后一個對象的鍵的值。因此更新只發生一次最后一個值

演示代碼盒


查看完整回答
反對 回復 2019-08-28
?
撒科打諢

TA貢獻1934條經驗 獲得超2個贊

快速回答:

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

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

這種方法不易出錯,有助于消除一些非常難以發現的錯誤。即使react批處理多個此類更新,每個更新都是單獨的函數調用,后續更新不會導致某些更新丟失。

另一種方法

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

如果頻繁重復,可能會導致某些更新丟失,因為React會批量處理此類頻繁更新。


查看完整回答
反對 回復 2019-08-28
  • 3 回答
  • 0 關注
  • 780 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號