在不觸發重新渲染的情況下調用setState

我在React組件的state中存儲UI狀態，比如this.state.receivedElements這是一個數組。每當元素被推到receivedElements時，我都想重新渲染。我的問題是，我可以不觸發渲染時，數組變成空的？
或者一般來說，我可以撥打setState()一次，而無需重新渲染，而重新渲染所有其他時間？（有沒有任何選擇，解決方法？）
我已閱讀此主題：https://github.com/facebook/react/issues/8598但沒有找到任何內容。在不觸發重新渲染的情況下調用setState

來源

2017-10-16 Dane

聽起來像你想破解組件的行爲。你怎麼看，它會持續多久，直到你需要破解黑客？你爲什麼不解釋你到底在做什麼以及你有什麼問題。或者換句話說，真正的問題會導致你正在嘗試的這種黑客行爲。 – Thomas

實際上，我不是故意要_hack_ ..我只是想知道我是否可以避免不必要的渲染......即使渲染髮生，也不會出錯:) – Dane

我想要重新呈現一個元素被推到receivedElements。

請注意，您不會得到重新繪製，如果你使用：

this.state.receivedElements.push(newElement); // WRONG

有違反您不能直接修改狀態的限制。你需要：

this.setState(function(state) { 
    return {receivedElements: state.receivedElements.concat([newElement])}; 
});

（它需要回調的版本，因爲它依賴於當前的狀態來設置新的狀態。）

我的問題是，我可以不觸發渲染時數組變空了？

是 —在這種情況下，沒有要求setState。

這聽起來好像receivedElements不應該是你的國家的一部分，但你分開管理和反映在state適當的代替信息。例如，組件本身可能有receivedElements，state可能有displayedElements。然後：

this.receivedElements.push(newElement); 
this.setState({displayedElements: this.receivedElements.slice()});

...和

// (...some operation that removes from `receivedElements`...), then: 
if (this.receivedElements.length) { 
    this.setState({displayedElements: this.receivedElements.slice()}); 
}

注意我們如何不叫setState如果this.receivedElements是空的。

來源

2017-10-16 11:03:01

雖然此解決方案有效並且不會調用新的渲染，但我**強烈**建議不要直接修改狀態，每次使用setState（）。如果由於某種原因，您不想在狀態更改後調用渲染，則應該使用** shouldComponentUpdate **。 – patotoma

@patotoma：我不同意上面應該避免;如果對元素的更改有時不應該呈現，那麼在我看來，它們不應該成爲「狀態」的一部分。儘管如此，['shouldComponentUpdate']（https://reactjs.org/docs/react-component.html#shouldcomponentupdate）是另一種可行的方法。你可能會發表一個關於這個的答案。 –

@ T.J.Crowder非常具有說服力！謝謝！！我已經知道'變異狀態不會導致渲染'和'它需要成爲回調版本'，但現在我有了一個全新的角度來看待'狀態'中的內容以及不應該:) – Dane

在不觸發重新渲染的情況下調用setState

回答

相關問題