2017-07-20 82 views
0

假設在一個函數中,我總是需要設置someState,並且只需要設置someOtherState如果condition爲真。反應保持單setState調用?

它是最好做這樣的:

this.setState({ someState }); 

if (condition) { 
    this.setState({ someOtherState }); 
} 

或那樣嗎?

if (condition) { 
    this.setState({ someState, someOtherState }); 
} else { 
    this.setState({ someState }); 
} 

我知道REACT爲優化,確保在快速連續調用setState通常不會導致重新繪製。但是,這種行爲是有保證的,還是應該由代碼做出這種假設?

例如。假設它在固定的時間間隔內重新渲染,如果第一個setState在該間隔塊結束之前被調用,那麼第二個setState將導致重新渲染?

回答

2

你爲什麼不使用三元運算符?如果條件爲真,則將其設置爲新狀態。否則,使用舊的。

if (condition) { 
    this.setState(prevState => ({ 
    someState, 
    someOtherState: condition ? newSomeOtherState : prevState.someOtherState 
    })) 
} 
0

反應批次setState調用,因此執行順序更新調用應該只觸發一個調用來呈現。

假設您處於React託管事件功能(React事件系統)內,您可以假設它將被批處理。例如,如果它是一個AJAX調用,或者其他一些延遲的函數(如promise或setTimeout),則不會進行批處理。

編輯 This post在大多數情況下,事件的順序的一個很好的總結。你會發現關於國家部分中途下來,但我會盡力在這裏總結一下:

令雲:

  1. 更新國家
  2. ShouldComponentUpdate
  3. ComponentWillUpdate
  4. 渲染
  5. 。 ..

如果你打電話在其中的一個功能中,React足夠聰明,可以在運行批量更新之前等待它們完成。

見上的setState這裏陣營文檔的詳細信息:

(鏈接極限:facebook.github.io)/react/docs/react-component.html#setstate

,並在配料的討論在這裏:

https://groups.google.com/forum/#!topic/reactjs/G6pljvpTGX0

+0

將它肯定進行批處理,即使'setState'被稱爲在不同的功能?即當主循環完成執行時,只有事件循環被刷新,也就是空閒? – Avery235

+0

這取決於您的代碼以及它的運行位置。這主要取決於反應函數的運行順序。但是一般來說,如果這些功能在渲染之前處於生命週期內,那麼它們仍然會進行批處理,如果這樣做合理的話。 –

+0

「在渲染前的生命週期內」 生命週期如何確定? – Avery235