序文フックは 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
ステップ1: MySQLでbinlogが有効になっていることを確認する '%log_bin%...
この記事では、参考までに、簡単なログイン機能を実装するためのvue+tp5の具体的なコードを紹介しま...
新しいバージョンの設定インターフェースを作る際に、vueフレームワークを使用して実装しました。ページ...
この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...
目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...
var numA = 0.1; var numB = 0.2; アラート(numA + numB)...
NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...
圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...
成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...
初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...
1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...
数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...
ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...
ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...
まずは適用方法を説明します。nginxモジュールにはjtxyとjtcmdの2つがあります。 http...