时间戳

首页 > 解决方案 > 使用 setState 和 redux 操作时如何避免重复的 render() 调用

reactjs - 使用 setState 和 redux 操作时如何避免重复的 render() 调用

问题描述

作为标题，我发现以下代码将进行重复的 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() 调用？非常感谢

标签： reactjsreduxreact-redux

解决方案

如果你想从两个不同的地方更新这两个计数器，你会render()因为两次不同的更新而导致两次调用方法。首先，我会建议你不要将可以通过 props 实现的东西保存在 state 中，例如 redux 全局 state。其次，我建议您同时使用setState()这两个计数器，或者调用将更新相关的操作。然后，您将只调用render()一次。

推荐阅读