ReactのuseEffectクロージャの落とし穴についての簡単な説明

ReactのuseEffectクロージャの落とし穴についての簡単な説明

問題コード

useEffectによって発生したクロージャの問題コードを見てみましょう

定数 btn = useRef();
const [v, setV] = useState('');

使用効果(() => {
    クリックハンドルを () とします => {
        コンソールにログ出力します。
    }
    btn.current.addEventListener('click', clickHandle)
    
    戻り値 () => {
        btn.removeEventListener('click', clickHandle)
    }
}, []);
    
定数入力ハンドル = e => {
    setV(e.target.value)
}

戻る (
        <>
            <入力値={v} onChange={inputHandle} />
            <button ref={btn} >テスト</button>
        </>
    )

useEffect の依存関係配列は空なので、内部コードはページのレンダリングが完了した後に 1 回だけ実行され、ページが破棄されたときにもう一度実行されます。このとき、入力ボックスに任意の文字を入力してテスト ボタンをクリックすると、出力は空になります。その後、どのような文字を入力して再度テスト ボタンをクリックしても、出力結果は空のままです。

なぜこのようなことが起こるのでしょうか?実際、それは閉鎖によって引き起こされます。

原因

関数のスコープは、関数が定義されるときに決定されます。

btn のクリック イベントを登録する場合、スコープは次のようになります。

現時点では、アクセス可能な自由変数 v はまだ null です。クリックイベントがトリガーされると、クリックコールバック関数が実行されます。このとき、まず実行コンテキストが作成され、スコープチェーンが実行コンテキストにコピーされます。

  • 入力ボックスに文字が入力されていない場合、クリックしたときに表示されるvは元のvのままです。
  • 入力ボックスに文字が入力されると、setV が呼び出されて状態が変更され、ページがレンダリングをトリガーし、コンポーネントの内部コードが再実行されて v が再宣言され、v は元の v ではなくなります。クリック イベントのスコープ内の v は、古い v のままです。これらは 2 つの異なる v です。

シーンを生成する

  • イベントバインディング。たとえば、サンプル コードでは、ページの初期レンダリングが完了した後にイベントが 1 回だけバインドされます。たとえば、echarts を使用する場合、useEffect で echarts のインスタンスが取得され、イベントがバインドされます。
  • タイマー。ページが読み込まれた後にタイマーを登録すると、タイマー内の関数で同様のクローズの問題も発生します。

解決

この閉鎖問題に対する 5 つの解決策は次のとおりです。

1. 代入によってvを直接変更し、vを変更するメソッドをuseCallbackでラップする

v を変更するメソッドを useCallback でラップします。useCallback でラップされた関数はキャッシュされます。依存関係の配列が空なので、ここで直接割り当てによって変更された v は古い v です。setState は状態を変更する公式に推奨される方法であるため、この方法は推奨されません。ここでは、setV は再レンダリングをトリガーするためだけに使用されています。

// 直接変更しやすいように、v の宣言を const から var に変更します。var [v, setV] = useState('');

const inputHandle = useCallback(e => {
    {値} = e.targetとする
    v = 値
    setV(値)
}, [])

2. useEffectの依存関係にvを追加する

これは、ほとんどの人が最初に思いつく解決策かもしれません。v は古いので、v が更新されるたびにイベントを再登録すればいいのではないでしょうか。しかし、これでは v が更新されるたびに再登録が必要になります。理論上は、1 回だけ登録すればよいイベントが複数回登録されることになります。

3. vの再宣言を避ける

let または var を使用して v の代わりに変数を宣言し、setState 関連関数を使用してレンダリングをトリガーする代わりに、変数を直接変更します。この方法では、変数は再宣言されず、クリック コールバック関数で「最新の」値を取得できます。ただし、この方法は推奨されません。この例では、再レンダリングがないため、入力コンポーネントには常に空の値が表示され、期待される操作を満たしていません。

4. useStateの代わりにuseRefを使用する

定数 btn = useRef();
定数vRef = useRef('');
定数[v, setV] = useStat('');

使用効果(() => {
    クリックハンドルを () とします => {
        console.log('v:', vRef.current);
    }
    btn.current.addEventListener('click', clickHandle)
    
    戻り値 () => {
        btn.removeEventListener('click', clickHandle)
    }
}, []);

定数入力ハンドル = e => {
    {値} = e.targetとする
    vRef.current = 値
    setV(値)
}

戻る (
        <>
            <入力値={v} onChange={inputHandle} />
            <button ref={btn} >テスト</button>
        </>
    )

useRef ソリューションが効果的な理由は、入力の変更ごとに vRef オブジェクトの現在のプロパティが変更され、vRef は再レンダリングされても常にその vRef であるためです。vRef はオブジェクトであるため、スタック メモリに格納されている変数の値はヒープ メモリ内のオブジェクトのアドレスであり、単なる参照です。オブジェクトの特定のプロパティのみが変更され、参照は変更されません。クリックイベントのスコープチェーンは常に同じvRefにアクセスします

5. vをオブジェクト型に置き換える

実際、useRef を使用する場合と同様に、オブジェクトである限り、特定の属性のみを変更しても、状態が指すアドレスは変更されません。

コードアドレス

テストコードを見るにはここをクリックしてください

これで、React useEffect クロージャの落とし穴に関するこの記事は終わりです。React useEffect クロージャに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React useEffect の理解と使用
  • React における useEffect と useLayoutEffect の違い

<<:  Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

>>:  Dockerでパラメータ変数を外部から指定する方法

推薦する

複雑なSQLクエリを含むMySQLの一般的なSQL文の概要

1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...

LinuxでTomcatのポート番号を変更する方法

ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...

ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有

プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...

IP アドレス経由で MySql にアクセスする方法

1. mysqlにログインします。 mysql -u ルート -h 127.0.0.1 -p 2. ...

Vue3におけるキーの役割と動作原理についての簡単な説明

このキー属性の機能は何ですか?まずは公式の説明を見てみましょう。 kekey 属性は主に、新しいノー...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

JavaScript によるダイナミッククリスマスツリーの詳細な説明

目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...

記事では、js を使用して弾幕効果を実現する方法を説明します

目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...

HTML でスタイルを使用して属性を追加する例

必要なリンクにインライン スタイルを追加します。コードをコピーコードは次のとおりです。 <a ...

MySQL シリーズ データベース設計 3 つのパラダイム チュートリアルの例

目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...

MySQL データベースのエンコーディングを utf8mb4 に変更する方法

utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...

Vueダイナミックフォームの詳細な応用

概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...

MySQLがブール型を返すいくつかの状況について簡単に説明します。

mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...

MysqlクエリJSON結果に関連する関数の概要

JSON 形式のフィールドは、MySQL 5.7 で追加された新しい属性ですが、基本的には文字列とし...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...