反応非同期および同期の問題のSETSTATE

1）。SetState関数は、（）の状態が非同期または同期して更新しますか？

。実行SETSTATE（）の位置？

コールバック関数では、制御反応する：ライフサイクルフックを/イベントリスナーコールバックを反応させます

/タイマーコールバック/コールバックネイティブのDOMイベントリスナー/約束のコールバック...：非同期コールバック以外は、制御の反応します

B。非同期または同期？

非同期：関連コールバックを（ライフサイクルコールバック、イベントリスナーがコールバック）反応

その他の非同期コールバック（タイマー、ネイティブDOMイベントリスナーのコールバック、Promsieコールバック）：同期

次の点を確認します。

インポートは、{コンポーネント}リアクトから ' REACT ' 

クラスデモコンポーネント{延びている
    状態 = { 
        COUNT：0 
    } 
    / * *非同期更新は：レーンコールバックイベントリスナーを反応させる、SETSTATE非同期更新である* / 
    アップデート1 =（）=> { 
        コンソール。ログ（' 更新前のアップデート1 '、この.state.count）
         この .setState（状態=>（{COUNT：state.count + 1 }）） 
        （にconsole.log ' アップデート1を更新した後'、この.state.count）
    } 
    / **非同期更新：ライフサイクル・コールバック関数を反応させ、SETSTATEは非同期更新* / 
    componentDidMount（）{ 
        にconsole.log（' componentDidMount更新事前'、この.state.count）
         この .setState（状態=>（{COUNT：状態を+ .count 1 }））
        はconsole.log（' componentDidMount更新後'、この.state.count）
    } 
    / * *同期更新：タイマーコールバック   * / 
    アップデート2 =（）=> { 
        たsetTimeout（（） => { 
            コンソール。ログ（「タイマ更新の前に」、この.state.count）
             この .setState（状態=>（{COUNT：state.count + 1 }））
             / * SETSTATEトリガ更新につながる*更新プロセスは、次のコード、同期の更新ここで実行する前に完了される* / 
            コンソール。 （ログ' タイマ更新後'、この.state.count）
        }、3000 ）
    } 
    / * *同期更新：ネイティブDOMイベントリスナーコールバックが結合--- REF   * / 
    Update3と =（）=> { 
        LETのcount_dom = この。 refs.count_dom 
        count_dom.onclick =（）=> { 
            にconsole.log（' 更新前の元のDOMイベントリスナーコールバック'、この.state.count）
             この .setState（状態=>（{COUNT：state.count + 1 }））
            はconsole.log（' 元のDOMイベントリスナーコールバック更新'、この.state.count）
        } 
    } 
    / * *同期更新：約束コールバック   * / 
    Update4 =（）=> { 
        。Promise.resolve（）を（値 => { 
            にconsole.log（' 更新前の約束'、この.state.count）
             この .setState（状態=>（ COUNT {：state.count + 1 }））
            はconsole.log（' 約束更新后'、この.state.count）
        }）
    } 
    （レンダリング）{ 
        CONST {カウントが} = この.state 
        はconsole.log（' レンダリング渲染' 、数）
         リターン（ 
             <> 
                <H2 REF = " count_domを" > {カウント} </ H2> 
                <ボタンのonClick = { この .update1}>更新1 </ボタン> 
                <ボタンのonClick = { この .update2}>更新2 </ボタン> 
                <ボタンのonClick = { この.update3}>更新3 </ボタン> 
                <ボタンのonClick = { この .update4}>更新4 </ボタン> 
                <ボタンのonClick = { この .update5}>更新5 </ボタン> 
            </> 
        ）。
    } 
} 
 
輸出デフォルトデモ。

データがケースに上記のように学習することができ、あなたは同期捕捉SETSTATEを変更することができます

理由：操作のawait SETSTATE約束のコールバックは、それが同期されていること

2）非同期SETSTATEについて（）

に対処する方法について説明します。複数のコール、？

SETSTATE（{}）：一度だけ（レンダリングと呼ばれる更新合わせ状態）画面更新を更新---インターフェイスの更新をマージします

SETSTATE（FN）：状態が複数回更新しますが、コールは1つだけのrender（）更新インタフェース---何のステータスの更新をマージしませんが、更新されたインタフェースをマージ

B。非同期データ更新の状態を取得する方法？

コールバックのSETSTATE（）コールバック関数で

。

反応非同期および同期の問題のSETSTATE

おすすめ