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

推薦する

ethers.js を使用して Solidity スマート コントラクトをデプロイする方法

Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...

MYSQL の binlog 最適化に関する考察の要約

質問質問 1: トランザクションをコミットするときに REDO ログをフラッシュすることによって発生...

MySQL 文字列連結と null 値の設定のためのインスタンス メソッド

#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...

this.parentNode.parentNode (親ノードの親ノード) はどういう意味ですか?

親ノードの親ノード、例えば、このような段落がありますHTML:コードをコピーコードは次のとおりです。...

ウェブページからテキスト透かしを削除する2つの簡単な方法

<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...

Angular CLI リリース パスの構成項目の簡単な分析

序文プロジェクトのリリースでは、常に特定の状況に応じたパッケージ化が必要です。Angular CLI...

MySQL 入門 - SQL 実行プロセス

目次1. プロセス2. コアアーキテクチャ2.1 サーバー層の基本コンポーネントの紹介3. ステート...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

最新の仮想マシン VMware 14 インストール チュートリアル

まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...

Linux ユーザー状態とカーネル状態間の通信方法の詳細な説明

CPU 権限の制限により、Linux ユーザー状態とカーネル状態間の通信は、プロセス間通信を使用した...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

pagodaを使用してionCube拡張機能をインストールする方法

1. まずパゴダを設置するインストール要件: Python バージョン: 2.6/2.7 (Pago...

ウェブページで CSS スタイルを適用するさまざまな形式の概要

1. インライン スタイル (<body></body> 内に配置されます)...