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 のインストール チュートリアル

推薦する

Docker デプロイメント Springboot プロジェクト例の分析

この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

Dockerfileを使用して独自のイメージを作成する方法

1. 空のディレクトリを作成する $ cd /home/xm6f/dev $ mkdir myapp...

mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...

MySql 組み込み関数の自習知識ポイントまとめ

文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...

MySQLの日付加算と減算関数の詳細な説明

1. 追加時間()指定した秒数を日付に追加する select addtime(now(),1); -...

Mysql systemctl start mysqld によって報告されるエラーの解決策

エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...

MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法

障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...

Bash で山括弧を使用するその他の方法

序文この記事では、山括弧のその他の用途をさらに詳しく見ていきます。前回の記事では、山括弧 (<...

MySQL の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

Vue における v-for のキーの一意性の詳細な説明

目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...

VMware Workstationはデバイス/資格情報ガードと互換性がありません

仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...

MySQL トランザクションの概念と使用法の詳細な説明

目次情事の概念取引の状態取引の役割取引の特徴トランザクション構文トランザクション対応ストレージエンジ...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法

1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...