javascript - 在不触发重新渲染的情况下调用 setState

Question

我在 React 组件的 state 中存储了一个 UI 状态，比如说 this.state.receivedElements，它是一个数组。每当将元素推送到 receivedElements 时，我都希望重新呈现。我的问题是，我可以在数组变空时不触发渲染吗？
或者一般来说，我可以只调用一次 setState() 而不重新渲染，而在其他所有时间都重新渲染吗？ (是否有任何选项、解决方法？)
我已经阅读了这个主题:https://github.com/facebook/react/issues/8598但没有找到任何东西。

Answer 1

I want re-renders whenever an element is pushed to receivedElements.

请注意，如果您使用以下方法，您不会重新渲染:

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

这违反了不能直接修改状态的限制。你需要:

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

(它需要是回调版本，因为它依赖于当前状态来设置新状态。)

My question is, can I not trigger rendering when the array becomes empty ?

是的——在这种情况下不调用 setState。

听起来好像 receivedElements 不应该是您状态的一部分，而是您单独管理的信息，并在 state 中适本地反射(reflect) .例如，您可能在组件本身上有 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()});
}

请注意，如果 this.receivedElements 为空，我们如何不调用 setState。