Reactjs 如何在使用setState和redux操作时避免重复的render（）调用

作为标题，我发现以下代码将进行重复的render（）调用：

情况就像我给setState打了两次电话一样。但是两个setState可以很容易地与一个语句合并，例如：

// Before changes (render() call two times)
this.setState({counter1: this.state.counter1+1});
this.setState({counter2: this.state.counter2+1});

// After changes (render() call only once)
this.setState({
    counter1: this.state.counter1+1,
    counter2: this.state.counter2+1
});

---

有什么技巧可以合并setState和redux操作，以便只调用1个render（）吗？非常感谢

如果您想从两个不同的位置更新两个计数器，由于两个不同的更新，您将导致两次调用

render（）

方法。首先，我建议您不要将从道具中获得的东西保存在状态中，例如redux全局状态。其次，我建议您对两个计数器都使用

setState（）

，或者调用将更新相关计数器的操作。然后，您将只调用一次

render（）

。

发送操作-->通过还原器更新存储-->状态将自动更新，因为connect已订阅存储更改的更新。有活的示例吗？

// Before changes (render() call two times)
this.setState({counter1: this.state.counter1+1});
this.setState({counter2: this.state.counter2+1});

// After changes (render() call only once)
this.setState({
    counter1: this.state.counter1+1,
    counter2: this.state.counter2+1
});