Reactのヒントはフックの依存関係の問題を解消する方法を教えます

Reactのヒントはフックの依存関係の問題を解消する方法を教えます

reactプロジェクトで非常に一般的なシナリオ:

const [watchValue、setWatchValue] = useState('');
const [otherValue1, setOtherValue1] = useState('');
const [otherValue2, setOtherValue2] = useState('');

使用効果(() => {
    何かを実行します(他の値1、他の値2);
}, [watchValue, otherValue1, otherValue2]);

watchValueが変更されたときにdoSomethingを実行し、他の値otherValue1otherValue2を参照します。

ここで厄介な疑問が浮かびます。

  • otherValue1otherValue2依存関係配列に追加されていない場合、 doSomething otherValue1otherValue2の古い変数参照にアクセスする可能性が高く、予期しないエラーが発生します ( hooks関連のeslintがインストールされている場合は、警告が表示されます)。
  • 逆に、 otherValue1otherValue2依存関係配列に追加されると、これら 2 つの値が変更されたときにdoSomethingも実行されますが、これは望ましいことではありません (値を参照するだけで、 doSomethingをトリガーしたくはありません)。

この問題は、 otherValue1otherValue2 refに変更することで解決できます。

const [watchValue、setWatchValue] = useState('');
const other1 = useRef('');
other2 は useRef() を使用します。

// 参照は変更されないため、依存関係配列に ref を追加する必要はありません useEffect(() => {
    何かを実行します(other1.current、other2.current);
}, [ウォッチ値]);

この方法では、 other1other2の変数参照は変更されないため、前の問題は解決されますが、新しい問題が発生します。other1 とother2 other1 currentの値が変更されても、コンポーネントの再レンダリングはトリガーされません ( useRef的current変更によってコンポーネントのレンダリングがトリガーされることはありません)。そのため、値が変更されてもインターフェイスは更新されません。

これはhooksでは頭痛の種です。useState useStateは再レンダリングをトリガーし、インターフェースを最新の状態に保ちますが、 useEffectの依存関係として使用されると、常に不要な関数の実行をトリガーします。 useRef変数はuseEffect依存関係として安全に使用できますが、コンポーネントのレンダリングはトリガーされず、インターフェースは更新されません。
どうすれば解決できるでしょうか?

useRefuseStateの機能を組み合わせて、新しいhooks関数useStateRefを構築できます。

「react」から useState、useRef をインポートします。

// useState の応答性を維持しながら useRef の参照特性を使用する type StateRefObj<T> = {
  _状態: T;
  値: T;
};
デフォルト関数 useStateRef<T>( をエクスポートする
  初期状態: T | (() => T)
): StateRefObj<T> {
  // 初期化値 const [init] = useState(() => {
    if (typeof initialState === "function") {
      初期状態を () => T として返します ();
    }
    初期状態を返します。
  });
  // コンポーネントのレンダリングをトリガーする状態を設定します。const [, setState] = useState(init);
  
  // 値を読み取ると、最新の値が取得されます // 値を設定すると、setStateがトリガーされ、コンポーネントがレンダリングされます const [ref] = useState<StateRefObj<T>>(() => {
    戻る {
      _状態: 初期化、
      値を設定する(v: T) {
        this._state = v;
        状態を設定します。
      },
      値を取得する() {
        this._state を返します。
      },
    };
  });
  
  // 返されるのは参照変数であり、コンポーネントのライフサイクル全体を通じて変更されません。 return ref;
}

したがって、次のように使用できます。

定数ウォッチ = useStateRef('');
const other1 = useStateRef('');
const other2 = useStateRef('');

// 値を次のように変更します: watch.value = "new";

使用効果(() => {
    何かを実行します(other1.値、other2.値);
   // 実際、これら 3 つの値は参照変数となり、コンポーネントのライフサイクル全体で変更されないため、依存関係配列を追加する必要はありません。 // ただし、React Hooks の eslint プラグインは、useRef を参照としてのみ認識できます。追加されていない場合は警告が表示されます。変数参照の安全性のため、引き続き追加されます。 }, [watch.value, other1, other2]);

このように、 watch, other1other2 useRefの参照機能を持ち、 doSomethingの不要な実行をトリガーしません。 useStateの応答性により、 .valueを変更すると、コンポーネントのレンダリングとインターフェースの更新がトリガーされます。
変数の変更によってdoSomethingをトリガーしたい場合は、依存関係配列にwatch.valueを追加します。値を参照するだけでdoSomethingをトリガーしたくない場合は、変数自体を配列に追加します。

上記は、フック依存性のトラブルを解消するためのReactのヒントの詳細です。Reactフック依存性の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React Hooksの詳細な説明
  • React Hooksを使用する際のよくある落とし穴
  • 30分でReact Hooksを包括的に理解できます
  • Reactフックの仕組み
  • Reactフックの長所と短所
  • React のクラスからフックへの移行

<<:  実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

>>:  CentOS 7 での mysql 5.7 のインストール チュートリアル

推薦する

Win10 + Ubuntu20.04 LTS デュアルシステムブートインターフェースの美化

エフェクト表示組み込みのブートインターフェースがあまりにも醜いので、テーマをダウンロードして美しくし...

Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法

この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...

ウェブサイトを構築するときは、UTF-8 または GB2312 エンコードを使用する必要がありますか?

外国のウェブサイトを開くと文字化けした文字が表示されることが多く、また、英語以外の外国のウェブサイト...

MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQLのダウンロードとインストール(バージョン8.0.20)のチュートリアルは参考までに、具体的...

JavaScript 組み込みオブジェクトの概要

目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...

MySQL 5.7.20\5.7.21 無料インストール版のインストールと設定のチュートリアル

参考までに、mysql 5.7.20 / 5.7.21 をダウンロード、インストール、構成します。具...

ドメイン名、ポート、異なるIPに基づくnginx仮想ホスト設定の実装

1. nginx仮想ホストの設定仮想ホストを使用すると、実行する Web サイトごとに個別の Ngi...

MySQLデータベースイベントスケジュール実行タスクの詳細な説明

1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...

ドロップダウンリスト選択ボックスを実装するJavaScript

この記事の例では、ドロップダウンリスト選択ボックスを実装するためのJavaScriptの具体的なコー...

RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

Windows Server 2008R2 ファイル サーバーを Windows Server 2016 にアップグレードする

ユーザー組織には、ドメインに参加している 2 台の Windows Server 2008 R2 フ...

デザイナーはコーディングを学ぶ必要がありますか?

多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...

MySQL sql_mode の使用に関する詳細な説明

目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...

MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...