为什么要使用 React setState updater arguments？

Question

According to the React.js documentation , when state should be updated based on current state and props, a function should be provided as the first argument to setState , as follows:

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

In contrast, I have been achieving this like so:

this.setState({
  counter: this.state.counter + this.props.step
});

Why is the first method recommended over the second?

Answer 1

State updates that depend upon previous state need to reference the previous state to update from. With the functional state update you can correctly access previous state.

setState

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback ( setState(updater, callback) ), either of which are guaranteed to fire after the update has been applied.

With the regular update

this.setState({
  counter: this.state.counter + this.props.step
});

Multiple calls to update state during the same render cycle will all reference the current state value from the current render cycle, ie state hasn't updated yet for any subsequent calls within the cycle. All the updates still occur, however, they each independently overwrite state, so the last update is the one that really updates state.

Consider this demo of regular and functional state updates

/**
 * count +3 click handler using naive state updates.
 */
clickHandler1 = () => {
  // assume count equals some number n
  this.setState({ count: this.state.count + 1 }); // update queued, count === n, count = n + 1
  this.setState({ count: this.state.count + 1 }); // update queued, count === n, count = n + 1
  this.setState({ count: this.state.count + 1 }); // update queued, count === n, count = n + 1
  // when processed the count will be n + 1
};

/**
 * count +3 click handler using functional state updates.
 */
clickHandler2 = () => {
  // assume count equals some number n
  this.setState((state, props) => ({ count: state.count + 1 })); // update queued, count === n + 0, count = prevCount + 1
  this.setState((state, props) => ({ count: state.count + 1 })); // update queued, count === n + 1, count = prevCount + 1
  this.setState((state, props) => ({ count: state.count + 1 })); // update queued, count === n + 2, count = prevCount + 1
  // now when processed each call uses the result of the previous update
  // count will be n + 1 + 1 + 1, or n + 3
};

Answer 2

This doc explains you clearly https://medium.com/@wisecobbler/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1

Answer 3

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Read the document from React.js

https://reactjs.org/docs/state-and-lifecycle.html