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でパラメータ変数を外部から指定する方法

推薦する

Tomcat と WebLogic で純粋な HTML ファイルを展開するプロセスの分析

1. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...

vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します

この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...

nginx で正規表現を使用してワイルドカードドメイン名を自動的に一致させる方法

Nginxは正規表現を使用して、ワイルドカードドメイン名をディレクトリに自動的に一致させます。 Ng...

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...

JavaScript でオブジェクトをエレガントに扱う 6 つの方法

目次序文1. オブジェクト.freeze() 2. オブジェクト.seal() 3. オブジェクト....

CentOS7にPHP7 Redis拡張機能をインストールする方法

導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...

ログインフォームを実装するためのJavaScript

この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...

innodb_flush_method 値メソッド (例の説明)

innodb_flush_methodのいくつかの典型的な値 fsync: InnoDB は fs...

Dockerでローカルマシン(ホストマシン)にアクセスする方法

質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....

MySQL のファントムリード問題を解決する方法

目次序文1. ファントムリーディングとは何ですか? 2. ファントムリーディングの問題点は何ですか?...

HTMLページ内の検索機能を完了する

最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

bashコマンドの使い方の詳細な説明

Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...