React setState/getState和异步

Question

为什么React中没有异步getState函数？

文档告诉我们setState是异步的.很好,但这意味着我们无法安全地使用this.state,我们需要一个异步getState来尊重执行顺序.

根据我的理解,我们永远不应该使用this.state并使用这样的getState函数:

  getState(callback) {
    this.setState((prevState) => {
      callback(prevState) ;
    });
  }
  ...
  this.getState((curState) => {
    // we now can use the current state safely
  }

在我的思维方式中,我在这里缺少什么？为什么React中不存在这样的功能？

- 编辑 -

正如我的一位朋友告诉我的那样,目前尚不清楚,因为我不相信第一个答案,让我们分析一些代码:

simpleFunc() {
    setState({ "counter" : 1 });
    setState({ "counter" : 2 });
    this.state.counter // => no garanty about the value
    getState((curState) => {  // ensure curState.counter is 2 });
}

这个简单的例子表明我们不能直接在所有情况下使用this.state,因为setState是异步的.

这是一个可以使用getState的计数器示例:http://codepen.io/Epithor/pen/ZLavWR？edit = 0010#0

简短的回答:糟糕的实践,甚至不确定getState给我们当前的

解决方法很简单,但事实上我们可以分解一些函数并使用它们而不关心上下文似乎很有趣,不是吗？

因此,当许多事件以特定顺序发生时,一些事件会改变状态,一些事件会读取状态:如何确定,当事件读取状态时使用this.state读取良好状态,因为所有更改都是异步的？

事实上所有都是关于时间的:

T     : event 1, change state
T+1ms : event 2, change state
T+2ms : event 3, read state
T+3ms : event 4, change state

由于您无法预测事件1或2的setState究竟何时发生,您如何保证事件3将真正读取事件2中设置的状态？

简短回答:事件在JS堆栈中排队,而状态更改在内部React队列中排队.在给出手之前,内部反应队列完全取消堆叠.

Answer 1

你绝对可以使用this.state直接一般.你永远不应该直接改变状态(this.state.foo = 0),而是setState在你想改变状态时使用.

通常setState看起来像这样:

this.setState({
    foo: 0
})

然后你可以安全地使用this.state.foo你的render()功能.

但是,有一点需要注意,由于异步性质setState,您无法保证在调用this.state之后可以立即访问setState.

myFunc(baz) {
    this.setState({
        foo: baz + 1
    })
    console.log(this.state.foo) // not guaranteed
}

更好

myFunc(baz) {
    const bazOne = baz + 1
    this.setState({
        foo: bazOne
    })
    console.log(bazOne)
}

或者使用setState函数second参数,用作setState操作完成时执行的回调.在该回调中,您将可以访问更新的状态,即this.state:

this.setState({ foo }, () => { console.log(this.state.foo) });

请参阅:https://facebook.github.io/react/docs/react-component.html#setstate

Answer 2

setState 是异步的，因此您无法立即访问您更改的属性，但是，在某些情况下，您希望在状态更改后执行操作，在这些情况下，您可以执行以下操作：

...

this.state = {
  x = 1
}

...

this.setState({
  x = 2
}, () => {
  console.log(this.state.x) // outputs 2
});

setState 函数在排队的滴答上被调用，因此您可能将 x 个 setState 排队，它们都将在下一个滴答上执行。

Answer 3

它实际上不是一个错误/问题，而是一个架构决定：state它不打算用作简单的属性/变量/存储，它专门用于界面/视觉状态，因此，不需要每次调用都会更新。它使用一个内部队列，所以如果你在渲染之前多次交换状态，它实际上只会用最终值更新一次，并且通过render调用time方法，它将包含正确的值。

如果你只需要存储/检索执行过程或方法，在同一阶段（运行之间的信息componentWillReceiveProps和shouldComponentUpdate，例如），您可以放心使用this.anyProperty一如既往：

componentWillReceiveProps() {
  this.value = 'guaranteed';
  return true;
}
shouldComponentUpdate() {
  if (this.value === 'guaranteed') {
    console.log('will always return true');
  }
}
componentDidUpdate() {
  this.value = ''; //cleanup
}

在上面的示例中，如果您使用了“setState”，则无法保证该值始终会在“shouldComponentUpdate”中更新，但是您是否将其用于预期目的并不重要。状态更改保证已render随时间刷新，因此它应该只包含在呈现阶段使用的信息，而不是对象的事务/内部数据。您可以像往常一样自由地继续使用对象属性。