USENTは非同期です:適切にUSENTとUseEffectを使用する方法を学ぶ

こんにちは読者、今日私は私が反応JSを使用してプロジェクトを作っていたとき直面した問題の1つについて話すつもりです.
USENTは非同期です、私は小さな例を通して私が意味するものをあなたに教えさせてください.

import React, { useState, useEffect } from 'react';

export default function App() {


    const [val, setVal] = useState(0);

    const addVal = () => {
        setVal(val + 1);
        console.log(val);
    }

    useEffect(() => {

        console.log("effect ", val);

    }, [val]);


    return <div>

        <div>{val}</div>

        <div><button onClick={() => { addVal() }}>ADD</button></div>
    </div>
}

ここでvalという名前の変数を0で初期化します.
また、ボタンをクリックします.
addval ()は以下の関数を持っています.

valの状態を設定します.
…するsetVal(val+1)

コンソール.ログ(val);

また、valの状態が変化したときに引き起こされる有効性もあります.
ボタンを一度クリックした後、コンソールを見てみましょう.

1 -最初のコンソールは、ページが最初に読み込まれるときに有効です.
2番目の2番目のコンソールはaddval関数のためです.
後、我々はヴァルの状態を更新します.
しかし、印刷される値は同じI . E . 0のままです.
では、何が起こっているのか.valの値はすぐに更新されません.それはプログラムの残りの部分を継続し、更新後の値を許可するように更新する時間がかかります.
3 - 3番目のコンソールログはUSE効果のためです.
私はあなたが概念を理解し、UseEffectを使用して状態の変化を管理することを忘れないでください.私は、その概念を完全には知らない.私はあなたがあまりにもそれらを作ることを願っています.
読み続けてくれてありがとう
お気軽に私と接続してください.

Github