問題コード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. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...
この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...
Nginxは正規表現を使用して、ワイルドカードドメイン名をディレクトリに自動的に一致させます。 Ng...
目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...
目次序文1. オブジェクト.freeze() 2. オブジェクト.seal() 3. オブジェクト....
導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...
基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...
この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...
innodb_flush_methodのいくつかの典型的な値 fsync: InnoDB は fs...
質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....
目次序文1. ファントムリーディングとは何ですか? 2. ファントムリーディングの問題点は何ですか?...
最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...
目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...
Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...