连续setState不像预期的那样工作

Question

我有下面的代码-

class Sum extends React.Component {
    constructor(props) {
      super(props)
      this.state = { a : 0 }
    }

    // let's call this ADD-1
    add = () => {
      this.setState({ a: this.state.a + 1 })
      this.setState({ a: this.state.a + 2 })
      this.setState({ a: this.state.a + 3 })
    } 

    render() {
      return (<div>
        <button onClick={this.add}> click me  </button>
        <div> sum  {this.state.a} </div>
      </div>)
    }
}

这将在单击按钮时呈现。

sum = 3

正如我所希望的那样，它将呈现sum = 6 i.1+2+3

此外，如果我将我的add方法更改为某种类似于适应prevState竞赛条件的方法-

  // let's call this ADD-2
  add = () => {
    this.setState({ a: this.state.a + 1 })
    this.setState({ a: this.state.a + 2 })
    this.setState(prevState => ({ a: prevState.a + 1 }))
    this.setState(prevState => ({ a: prevState.a + 4 }))
  }

它呈现sum = 7，而我希望得到sum = 8，即(1 +2+1+ 4)

现在我想到了两个问题：-

(一)为甚麽我们会看到上述的结果，而不是我所期望的呢？

2)为什么我看不到UI中加法的转换？比方说，如果我们考虑标记为ADD-1的方法，我应该看到类似于sum = 1，然后是sum = 3，然后是sum = 6。是因为批处理更新，但是批处理会将它们放在执行队列中，在我看来，它不会覆盖任何内容。

Answer 1

状态更新可能是异步的。看看这个回答。

在Dan的一个回答中，声明在一个事件调用中的状态更新只会在事件结束时产生一个重新呈现。

无论您在一个React事件处理程序中调用了多少个setState()组件，它们在事件结束时只会产生一个重呈现。

此外，批处理也只发生在反应性事件处理程序中的状态更新上，即批处理不会在AJAX调用中发生。

promise.then(() => {
  // We're not in an event handler, so these are flushed separately.
  this.setState({a: true}); // Re-renders with {a: true, b: false }
  this.setState({b: true}); // Re-renders with {a: true, b: true }
  this.props.setParentState(); // Re-renders the parent
});

但是您可以通过将回调传递给setState方法来实现您想要的结果。

add = () => {
      this.setState({ a: this.state.a + 1 },
        () => {
        this.setState({ a: this.state.a + 2 },
          () => {
          this.setState({ a: this.state.a + 3 })
        })
      })    
    }

以上将返回和= 6。

当不使用setState :中的回调时

PureComponent和shouldComponentUpdate可以用来调整组件的性能。当道具和状态没有改变时，它们可以防止生命周期方法的触发。 不管setState返回什么，shouldComponentUpdate回调都会触发。因此，即使状态没有改变，setState回调也会触发。

Answer 2

当您的更新依赖于当前状态时，请确保将一个函数传递给setState，以便它不会被后续的setState覆盖。

示例

class App extends React.Component {
  state = { a: 0 };

  add = () => {
    this.setState(previousState => {
      return { a: previousState.a + 1 };
    });
    this.setState(previousState => {
      return { a: previousState.a + 2 };
    });
    this.setState(previousState => {
      return { a: previousState.a + 3 };
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.add}> click me </button>
        <div> sum {this.state.a} </div>
      </div>
    );
  }
}

Answer 3

"React可以将多个setState()调用批处理到单个更新中，以提高性能。“

来自文档