性能比較this.setState（this.state）VS this.setState（{}）

我有一個場景，這是我從API獲取數據。在這種情況下，只要我從商店獲得新的值，我的componentWillReceiveProps（）就會被觸發。性能比較this.setState（this.state）VS this.setState（{}）

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.state.listOne = newProps.listOne; 
    } 
    if(newProps.listTwo){ 
    this.state.listTwo = newProps.listTwo; 
    } 

    this.setState(this.state); 

}

現在，作爲每反應DOC是不恰當的使用this.setState（this.state）;

所以牢記這一點，更新狀態將

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.setState({listOne : newProps.listOne}); 
    } 
    if(newProps.listTwo){ 
    this.setState({listTwo : newProps.listTwo}); 
    } 

}

在案例1我的渲染被觸發一次我已經複製所有數據後的狀態的方式。在第二種情況下我的渲染（和所有中間的生命週期）被觸發，每次我如果條件得到滿足。

所以我不明白它是如何提高自己的表現。可以說我們正在談論的不是一個，而是很多有條件的狀態更新。

來源

2017-12-27 Rishabh

請提供您收到的答案反饋;不管這是否「這不能解決我的問題」或將其標記爲已接受。 –

如果你想打電話setState只有一次，你可以做這樣的：

componentWillReceiveProps(newProps) { 
    // Copy the state instead of mutating this.state directly. 
    const state = { ...this.state }; 

    if (newProps.listOne) { 
     state.listOne = newProps.listOne; 
    } 

    if (newProps.listTwo) { 
     state.listTwo = newProps.listTwo; 
    } 

    this.setState(state); 
}

您可以進一步通過使用真正的不可變的數據結構由庫，如Immuable.js的手段改善這裏。

然而，像這樣的手動配料更新是不是從性能角度必要的;由於這是一個生命週期鉤子，React已經在內部批量處理這些更新。不過，如果您想使用setState的回調，則可能有意義。

來源

2017-12-27 14:22:13

嗨，你做狀態的深層副本所提供的解決方案，它會進一步降低性能，因爲現在整個虛擬DOM得到一個新的虛擬DOM更換，而不是更新狀態的參考與早期的情況。 – Rishabh

這不是一個深層次的副本。但是不要介意，我的答案不止於此。例如，多個setState調用由React分批生成的信息。 –

性能比較this.setState（this.state）VS this.setState（{}）

回答

相關問題