ウィンドウサイズを追跡するカスタムフックを作成し、コンポーネントが変更されたら更新します。

ウィンドウサイズを追跡し、コンポーネントが変更されたときにコンポーネントを更新するカスタムフックを作成するには、ReactでuseStateを使用し、 useEffectフックを使用します。このフックを?qū)g裝するための段階的なアプローチは次のとおりです。

 <code class="javascript">import { useState, useEffect } from 'react'; function useWindowSize() { // Initialize state with undefined width/height so server-side render works const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); useEffect(() => { // Handler to call on window resize function handleResize() { // Set window width/height to state setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); } // Add event listener window.addEventListener("resize", handleResize); // Call handler right away so state gets updated with initial window size handleResize(); // Remove event listener on cleanup return () => window.removeEventListener("resize", handleResize); }, []); // Empty array ensures that effect is only run on mount return windowSize; } export default useWindowSize;</code>

このカスタムフックであるuseWindowSize 、 useState Hookを使用してウィンドウサイズの狀態(tài)とuseEffectフックを管理し、ウィンドウのサイズ変更イベントのイベントリスナーをセットアップおよびクリーンアップします。フックは現(xiàn)在のウィンドウサイズを返します。これは、このフックをインポートおよび使用する任意のコンポーネントで使用できます。

ウィンドウサイズの変更をリアルタイムで監(jiān)視するためにカスタムフックを?qū)g裝するにはどうすればよいですか？

ウィンドウサイズの変更をリアルタイムで監(jiān)視するためのカスタムフックを?qū)g裝するには、次の手順に従ってください。

1. 必要なフックをインポートする： useStateをインポートし、reactからuseEffectことから始めます。これらは狀態(tài)および副作用を管理するために不可欠であるためです。
2. 初期化狀態(tài)： useStateを使用して、 widthとheightが定義undefined狀態(tài)を初期化します。これによりwindowが利用できない場合があるサーバー側(cè)のレンダリング中にフックが正しく動作できます。
3. サイズ変更ハンドラーを作成する：現(xiàn)在のwindow.innerWidthとwindow.innerHeightで狀態(tài)を更新する関數(shù)handleResizeを定義します。
4. イベントリスナーのセットアップ：Inside useEffect 、 resizeイベントのためにイベントリスナーをwindowオブジェクトに追加します。このリスナーは、ウィンドウがサイズ変更されるたびにhandleResizeを呼び出します。
5. 最初の呼び出し：すぐにhandleResizeを使用してuseEffectて、最初のウィンドウサイズを設(shè)定します。
6. クリーンアップ：コンポーネントがマウントされていないときにイベントリスナーを削除するuseEffectからクリーンアップ関數(shù)を返します。
7. 戻り狀態(tài)：最後に、コンポーネントで使用できるように、フックからwindowSize狀態(tài)を返します。

このアプローチにより、フックがウィンドウサイズをリアルタイムで更新し、リソースを適切にクリーンアップすることが保証されます。

カスタムフックを使用して、ウィンドウサイズに基づいてコンポーネントを効率的に更新するためのベストプラクティスは何ですか？

カスタムフックを使用してウィンドウサイズに基づいてコンポーネントを更新する場合、次のベストプラクティスを検討してください。

1. パフォーマンスの最適化： useMemoまたはuseCallbackを使用して、ウィンドウサイズに依存する高価な計算またはコールバック関數(shù)をメモ化します。これにより、不必要な再レンダーが防止されます。
2. Debounce Resizeイベント：急速なサイズ変更中に過度の更新を防ぐには、サイズ変更イベントハンドラーの脫curneを検討してください。 lodash.debounceなどのライブラリは、この目的に役立ちます。
3. 條件付きレンダリング：ウィンドウサイズを使用して、異なるレイアウトまたはコンポーネントを條件付きでレンダリングします。これにより、UIをさまざまな畫面サイズに適応させることで、ユーザーエクスペリエンスが向上します。
4. サーバー側(cè)のレンダリング互換性： undefined値で狀態(tài)を初期化し、アクセスする前にwindowの存在をチェックすることにより、フックがサーバー側(cè)のレンダリングで動作するようにします。
5. クリーンアップ： useEffectクリーンアップ機能で常にイベントリスナーをクリーンアップして、メモリリークを防ぎます。
6. 再利用性：さまざまなコンポーネントやプロジェクトで再利用できるようにフックを設(shè)計します。単一の責任（この場合はウィンドウサイズの追跡）に焦點を合わせてください。
7. テスト：カスタムフックのテストを書き込み、さまざまなウィンドウサイズやコンポーネントライフサイクルイベントなど、さまざまな條件下で正しく動作するようにします。

ウィンドウサイズの追跡フックを既存のReactコンポーネントに統(tǒng)合する方法の例を提供できますか？

useWindowSizeフックを既存の反応コンポーネントに統(tǒng)合する方法の例は次のとおりです。

 <code class="jsx">import React from 'react'; import useWindowSize from './useWindowSize'; // Assuming the hook is in a separate file function MyComponent() { const { width, height } = useWindowSize(); return ( <div> <h1>Current Window Size</h1> <p>Width: {width}px</p> <p>Height: {height}px</p> {width > 768 ? ( <p>This is a wide screen layout</p> ) : ( <p>This is a narrow screen layout</p> )} </div> ); } export default MyComponent;</code>

この例では、 MyComponent useWindowSizeフックを使用して現(xiàn)在のウィンドウの寸法を取得します。次に、これらの寸法を表示し、それらを使用して、ウィンドウの幅に基づいて異なるコンテンツを條件付きでレンダリングします。これは、フックをコンポーネントに簡単に統(tǒng)合して、ウィンドウサイズに基づいてUIを動的に更新する方法を示しています。

以上がウィンドウサイズを追跡するカスタムフックを作成し、コンポーネントが変更されたら更新します。の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。