問題コード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 です。クリックイベントがトリガーされると、クリックコールバック関数が実行されます。このとき、まず実行コンテキストが作成され、スコープチェーンが実行コンテキストにコピーされます。
シーンを生成する
解決この閉鎖問題に対する 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能
1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...
プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...
1. mysqlにログインします。 mysql -u ルート -h 127.0.0.1 -p 2. ...
このキー属性の機能は何ですか?まずは公式の説明を見てみましょう。 kekey 属性は主に、新しいノー...
1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...
目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...
目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...
必要なリンクにインライン スタイルを追加します。コードをコピーコードは次のとおりです。 <a ...
目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...
utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...
概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...
mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...
JSON 形式のフィールドは、MySQL 5.7 で追加された新しい属性ですが、基本的には文字列とし...
仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...