在不触发重新渲染的情况下调用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

回答

相关问题