Reactフックの長所と短所

Reactフックの長所と短所

序文

フックは React 16.8 の新機能です。これは完全にオプションであり、100% 下位互換性があります。これにより、機能コンポーネント、クラス コンポーネント、および状態管理、ライフサイクル フックなどの React のその他の機能を使用できるようになります。概念的には、React コンポーネントは常に関数に似ています。フックは、React の精神を犠牲にすることなく関数を採用します。

アドバンテージ:

1. コードが読みやすくなります。同じ関数のコード ロジックは、もともと異なるライフサイクル関数に分割されていたため、開発者が保守や反復処理を行うことが困難でした。React Hooks を使用すると、関数コードを集約して、読みやすく保守しやすくなります。たとえば、各ライフサイクルには関連のないロジックが含まれていることがよくあります。通常、componentDidMount と componentDidUpdate でデータを取得します。ただし、同じ componentDidMount には、イベント リスナーの設定など、他の多くのロジックも含まれている可能性があり、その場合は componentWillUnmount でクリアする必要があります。相互に関連しており、並行して変更する必要があるコードは分離され、完全に無関係なコードは同じメソッドに結合されます。これにより、簡単にバグや論理的な矛盾が発生する可能性があります。
2. コンポーネントツリーの階層が浅くなります。元のコードでは、コンポーネントの状態を再利用したり、機能を強化したりするために、HOC/レンダリングプロップなどの方法を使用することが多いため、コンポーネントツリーのレイヤー数とレンダリング数は間違いなく増加します。React DevToolsでReactアプリケーションを観察すると、プロバイダー、コンシューマー、高階コンポーネント、レンダリングプロップなどの抽象レイヤーで構成されるコンポーネントが「ネストされた地獄」を形成していることがわかります。 React Hooks では、これらの機能は強力なカスタム Hooks を通じて実装できます。
3. これがどこを指しているかを考える必要はありません。クラス コンポーネントでは、JavaScript でこれがどのように機能するかを理解する必要があります。

欠点:

1. レスポンシブな使用効果

関数コンポーネントを記述するときは、いくつかの記述習慣を変更する必要があります。コード内で useEffect と useCallback の「依存関係配列」がいつ変更されるかに注意する必要があります。場合によっては、useEffect は関数の不変性に依存し、この関数の不変性は別の関数の不変性に依存し、依存関係チェーンが形成されます。この依存関係チェーン内のノードが誤って変更されると、useEffect が誤ってトリガーされます。useEffect がべき等操作である場合、パフォーマンスの問題が発生する可能性があります。べき等ではない場合、ひどいことになります。

そのため、componentDidmount や componentDidUpdate と比較すると、useEffect はより大きな精神的負担をもたらします。

2. ステータスが同期されていない

関数は独立して実行され、各関数には独立したスコープがあります。関数の変数はランタイム スコープに格納されます。非同期操作がある場合、非同期コールバックの変数参照が以前のもの、つまり古いもの (ここではクロージャとして理解することもできます) になることがよくあります。たとえば、次の例をご覧ください。

React をインポートし、{useState} を "react" から取得します。
​
const カウンター = () => {
  const [カウンター、setCounter] = useState(0);
​
  定数 onAlertButtonClick = () => {
    タイムアウトを設定する(() => {
      alert("値: " + カウンター);
    }, 3000);
  };
​
  戻る (
    <div>
      <p>クリック回数は {counter} 回です。</p>
      <button onClick={() => setCounter(counter + 1)}>クリックしてください</button>
      <ボタン onClick={onAlertButtonClick}>
        3秒で価値を見せてください
      </ボタン>
    </div>
  );
};
​
デフォルトのカウンターをエクスポートします。

「3 秒後に値を表示」をクリックし、「クリックしてください」をクリックすると、カウンターの値が 0 から 1 に変わります。 3 秒後、タイマーがトリガーされますが、アラートには 0 (古い値) が表示されます。ただし、現在の状態は 1 にする必要があります。

クラス コンポーネントのプロパティとメソッドはインスタンスに格納され、呼び出しメソッドは this.state.xxx と this.method() であるため、この問題はクラス コンポーネントでは発生しません。毎回変更されていないインスタンスから値が取得されるため、古い参照の問題は発生しません。

実際、このフックの問題を解決するには、クラスのインスタンスを参照することもできます。 useRef によって返される不変の RefObject (現在のプロパティは変更可能) は状態を保存するために使用され、値へのアクセス方法は counter から counterRef.current に変更されます。次のように:

「react」から React、{useState、useRef、useEffect} をインポートします。
​
const カウンター = () => {
  const [カウンター、setCounter] = useState(0);
  定数counterRef = useRef(counter);
​
  定数 onAlertButtonClick = () => {
    タイムアウトを設定する(() => {
      alert("値: " + counterRef.current);
    }, 3000);
  };
​
  使用効果(() => {
    counterRef.current = カウンター;
  });
​
  戻る (
    <div>
      <p>クリック回数は {counter} 回です。</p>
      <button onClick={() => setCounter(counter + 1)}>クリックしてください</button>
      <ボタン onClick={onAlertButtonClick}>
        3秒で価値を見せてください
      </ボタン>
    </div>
  );
};
​
デフォルトのカウンターをエクスポートします。

結果は予想通りで、アラートの現在の値は 1 です。

Reactフックのよくある問題を回避する方法

  • useEffect にあまり多くの依存関係を記述せず、これらの依存関係を複数の単一関数 useEffect に分割します。実際、これはソフトウェア設計の「単一責任モデル」に従います。
  • 同期していない状態に関する問題が発生した場合は、関数にパラメータを手動で渡すことを検討してください。のように:
   // showCount のカウントは親スコープから取得されます const [count,setCount] = useState(xxx); 
   関数 showCount(){ console.log(count) } 

   // showCount のカウントはパラメータから取得されます const [count, setCount] = useState(xxx); 
   関数 showCount(c){ console.log(c) }

しかし、これで解決できるのは問題の一部だけであり、多くの場合、前述の useRef ソリューションを使用する必要があります。

3. eslint-plugin-react-hooks プラグインの警告に注意してください。

4. 複雑なビジネスの場合は、フックの代わりにコンポーネントを使用します。

以上がReactフックのメリットとデメリットの詳しい内容です。Reactフックのメリットとデメリットについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • React Hooksの詳細な説明
  • React Hooksを使用する際のよくある落とし穴
  • Reactのヒントはフックの依存関係の問題を解消する方法を教えます
  • 30分でReact Hooksを包括的に理解できます
  • Reactフックの仕組み
  • React のクラスからフックへの移行

<<:  EXPLAIN コマンドの詳細な説明と MySQL での使用方法

>>:  Linux のよく使うコマンドの使い方を詳しく解説(第 2 回)———— テキストエディタのコマンド vi/vim

推薦する

mysql5.7でbinlogを使用してデータを復元する方法

ステップ1: MySQLでbinlogが有効になっていることを確認する '%log_bin%...

vue+tp5はシンプルなログイン機能を実現

この記事では、参考までに、簡単なログイン機能を実装するためのvue+tp5の具体的なコードを紹介しま...

Vueページの画像が表示されない問題の解決方法

新しいバージョンの設定インターフェースを作る際に、vueフレームワークを使用して実装しました。ページ...

コンパイル、インストールから設定ファイルの説明まで、中国語でnginxの詳細な説明

この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

js 正確な計算

var numA = 0.1; var numB = 0.2; アラート(numA + numB)...

vue N​​progress のプログレスバー機能を実装する際の一般的な問題

NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...

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

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

CSS で写真のスタッキング効果を実装するサンプルコード

成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...

Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明

初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...

Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...

Node.js の TCP 接続処理のコア プロセス

数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...

ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。

ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...

MySQL パーティションテーブルの制限と制約の詳細な説明

ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...

nginx でのリクエストのカウント追跡の簡単な分析

まずは適用方法を説明します。nginxモジュールにはjtxyとjtcmdの2つがあります。 http...