setStateが非同期であるにもかかわらず、Reactの制御コンポーネントが機能する理由

Question

Controlled ComponentsとsetStateについて読んだ後、私はReactの一貫したメンタルモデルを構築することに問題があります。

言及したドキュメントからの制御されたコンポーネントの例、私の質問に関連する次の断片が含まれています。ユーザーは高速で、任意の編集操作を行うことができるので、とsetStateはおそらくです：

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

質問です非同期では、event.target.value='a'でonChangeが呼び出され、setState({ value: 'a'})となった瞬間t0で、ユーザがテキストを 'b'に変更し、瞬間t2でsetStateでキックインされた要求がキックインされ、テキストは古い値 'a'に置き換えられますか？

Answer 1

setStateの正しい精神モデルは、「非同期」という漠然とした用語とは少し異なるはずです。間違いなくsetTimeoutに似ていません。 debounceのように、setStateを新たに呼び出すと前の設定が上書きされます。フレームワークがレンダリングを実行することを決定した瞬間、このコントロールのためにこの時点までに起こったすべてのsetStateが既にマージされていることが保証されます。それぞれの編集アクションによってonChang eが同期的に呼び出されるという仮定と共に、これは、レンダ機能が呼び出されていることを意味し、this.state.valueはinput.valueに等しいことを意味します。