儘管setState是異步的，爲什麼React的受控組件工作

在閱讀了關於Controlled Components和setState後，我遇到了構建React的連貫心智模型的問題。儘管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時刻用戶將文本更改爲'b'，並且在時刻t2，通過setState創建的「排隊」請求開始，以及文本被替換爲陳舊值'a'？

來源

2017-07-02 qbolec

您將只有一個用戶同時與一個組件進行交互。可以肯定的是，如果值來自數據庫發生這些事情，那麼您應該確保如果共享數據，則只有在用戶擁有最新數據集時纔會進行保存，在所有其他情況下，1個組件1用戶應該apply – Icepickle

我認爲setState的正確心理模型應該與「異步」模糊術語有所不同。這絕對不像setTimeout。這更像是debounce，因爲新的setState調用覆蓋了前一個。框架決定運行渲染的那一刻，你保證發生在這個時刻的所有setState已經被合併。再加上一個假設，即每個編輯操作都會導致同步調用，這意味着在調用渲染函數時，this.state.value等於input.value。

來源

2017-07-02 20:01:30 qbolec

你公開對你自己說話嗎？：D – trixn

這是你的問題的補充，因爲它似乎有點「投機」;） – Icepickle

這基本上是正確的; 'setState'或多或少會立即運行。直到調用它的函數本身完成運行之後它纔會啓動。這會引起混淆，因爲有時React開發人員想從狀態中讀取他們剛剛寫入的狀態。但這是一個簡單解決方案的問題。 https://stackoverflow.com/questions/35867038/what-the-difference-of-this-state-and-this-setstate-in-reactjs/35868086#35868086 –

儘管setState是異步的，爲什麼React的受控組件工作

回答

相關問題