Question

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

pressBtn = () => {
    console.warn("call completeUserLogin");
    // setState is going to update component state.
    this.setState({counter1: this.state.counter1+1});
    // counterTwoUpdate is going to update redux state.
    this.props.counterTwoUpdate(this.props.counter2+1);
}

这种情况就像我两次调用setState一样。但是两个setState可以很容易地与1条语句合并，例如：

// 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（）调用？非常感谢

Answer 1

如果要从两个不同的位置更新两个计数器，由于两次不同的更新，将导致两次调用render()方法。首先，我建议您不要保存状态，例如redux全局状态。其次，我建议您对两个计数器都使用setState()，或者调用将更新相关计数器的操作。然后，您将仅调用一次render()。

使用setState和Redux动作时如何避免重复的render（）调用

1 个答案: