[FEATURE] implement a `getState` method to get the sync state since `setState` is async.

Do you want to request a feature or report a bug?

FEATURE REQUEST

What is the current behavior?

class MyComponent extends Component {
  state = { a: 1 }
  method1 = () => {
    this.setState({ a: 2 });
    this.method2();
  }
  method2 = () => {
    // It can not log 2 in the console.
    console.log(this.state.a);
  }
  // xxx...
}

What is the expected behavior?

class MyComponent extends Component {
  state = { a: 1 }
  method1 = () => {
    this.setState({ a: 2 });
    this.method2();
  }
  method2 = () => {
    // With the `getState` method, it should log 2 in the console.
    console.log(this.getState().a);
  }
  // xxx...
}

[xialvjun]

use case is just like this, What is the difference between passing an object or a function in setState?

incrementCount() {
  this.setState((prevState) => {
    // Important: read `prevState` instead of `this.state` when updating.
    return {count: prevState.count + 1}
  });
}

handleSomething() {
  // Let's say `this.state.count` starts at 0.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // If you read `this.state.count` now, it would still be 0.
  // But when React re-renders the component, it will be 3.
}

Yeah, setState with a function is OK. Then how about this?

checkAndDoSomething() {
  if (this.getState().count > 5) {
    doSomething();
  }
}
incrementCount() {
  this.setState((prevState) => ({count: prevState.count + 1}))
}
incrementManyTimes(time) {
  for (let i = 0; index < time; i++) {
    this.incrementCount();
  }
  this.checkAndDoSomething();
}

And in fact, we can change incrementCount to:

incrementCount() {
  this.setState({count: this.getState().count + 1})
}

Why should we use getState rather than setState with function as argument?

1. it has much more consistency: getState <-> setState;
2. it has purer purpose: getState is just to get state, but setState with function as argument is to get state and use that state to set state;

@gaearon

[xialvjun]

Well, it indeed can use the callback to ensure this.method2 be executed after rendered. In fact I have forgotten why I want this API. I just remember once upon a time I was confused about does the component have rendered and the state have merged if the event occurred too fast, like onScroll, I can not totally rely on this.state, so sometimes I attach some state just on this, like this.a=xxx;…

… well, sorry, maybe this API is not that necessary.