Question

在阅读了Controlled Components和setState后，我在构建一个连贯的React心智模型方面遇到了问题。

上述文档中受控组件的示例包含以下与我的问题相关的片段：

handleChange(event) {
   this.setState({value: event.target.value});
}
render() {
  return (
    <input type="text" value={this.state.value} onChange={this.handleChange}/>
  )
}

问题是：由于用户可以高速执行任意编辑操作，并且setState可能是异步的，因此有可能在t0时刻onChange调用event.target.value='a' }，导致setState({ value: 'a'})，然后在t1时刻，用户将文字更改为＆＃39; b＆＃39;，并且在时刻t2，＆＃34;排队＆＃34;通过setState发出请求，文本将被陈旧的值替换为＆＃39; a＆＃39;？

Answer 1

我认为setState的正确心理模型应该与模糊的术语“异步”有点不同。唤起。它绝对不像setTimeout。它更像是debounce，因为对setState的新调用会覆盖前一个。在框架决定运行渲染的那一刻，您可以保证已经合并了此时为此控件发生的所有setState。假设每个编辑操作同步调用onChang e，这意味着，在调用渲染函数时，this.state.value等于input.value。

为什么尽管setState是异步的，但React的受控组件仍能正常工作

1 个答案: