序文フックは React 16.8 の新機能です。これは完全にオプションであり、100% 下位互換性があります。これにより、機能コンポーネント、クラス コンポーネント、および状態管理、ライフサイクル フックなどの React のその他の機能を使用できるようになります。概念的には、React コンポーネントは常に関数に似ています。フックは、React の精神を犠牲にすることなく関数を採用します。 アドバンテージ: 1. コードが読みやすくなります。同じ関数のコード ロジックは、もともと異なるライフサイクル関数に分割されていたため、開発者が保守や反復処理を行うことが困難でした。React Hooks を使用すると、関数コードを集約して、読みやすく保守しやすくなります。たとえば、各ライフサイクルには関連のないロジックが含まれていることがよくあります。通常、componentDidMount と componentDidUpdate でデータを取得します。ただし、同じ componentDidMount には、イベント リスナーの設定など、他の多くのロジックも含まれている可能性があり、その場合は componentWillUnmount でクリアする必要があります。相互に関連しており、並行して変更する必要があるコードは分離され、完全に無関係なコードは同じメソッドに結合されます。これにより、簡単にバグや論理的な矛盾が発生する可能性があります。 欠点: 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フックのよくある問題を回避する方法
// 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の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: EXPLAIN コマンドの詳細な説明と MySQL での使用方法
>>: Linux のよく使うコマンドの使い方を詳しく解説(第 2 回)———— テキストエディタのコマンド vi/vim
導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...
目次QRコードログインの真髄QRコードを理解するシステム認証メカニズムQRコードをスキャンしてログイ...
ローカル データベースに接続すると、Navicat for MySQL は以下のように 1045 エ...
実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...
MySQL フルテキスト インデックスは、特定のテーブルの特定の列に表示されるすべての単語のリストを...
この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...
背景スレッド•マスタースレッドコア バックグラウンド スレッドは主に、バッファー プール データをデ...
目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...
この記事では、CSS で 2 つの固定列と 1 つのアダプティブ列を実装するいくつかの方法を紹介し、...
入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...
1. 背景最近、独立した開発者がUIデザインを行うのを支援するために、uideaというWebサイト...
赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...
障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...
目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...
LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...