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

推薦する

Vue ページレンダリングにおけるキーの適用例チュートリアル

導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...

js QRコードスキャンログインの原理についての簡単な説明

目次QRコードログインの真髄QRコードを理解するシステム認証メカニズムQRコードをスキャンしてログイ...

Navicat が MySQL に接続するときに発生する 1045 エラーの解決方法

ローカル データベースに接続すると、Navicat for MySQL は以下のように 1045 エ...

MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析

実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...

MySQL全文インデックスの原理と欠点

MySQL フルテキスト インデックスは、特定のテーブルの特定の列に表示されるすべての単語のリストを...

WeChatアプレットは記録機能を実装します

この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...

InnoDB のアーキテクチャと機能の詳細な説明 (InnoDB ストレージ エンジンの読書メモの要約)

背景スレッド•マスタースレッドコア バックグラウンド スレッドは主に、バッファー プール データをデ...

Vue から React への変換入門ガイド

目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...

CSS で 2 つの固定列と 1 つの適応列を実装するいくつかの方法

この記事では、CSS で 2 つの固定列と 1 つのアダプティブ列を実装するいくつかの方法を紹介し、...

Linux入力サブシステムフレームワーク原理の分析

入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...

Vue パッケージサイズの最適化の実装 (1.72M から 94K)

1. 背景最近、独立した開発者がUIデザインを行うのを支援するために、uideaというWebサイト...

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

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

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

JavaScript オブジェクトの 3 つのプロパティ

目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...

163 メールボックスログインボックスインタラクティブデザインの改善体験と共有

LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...