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

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

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

 <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を使用してウィンドウサイズの状態とuseEffectフックを管理し、ウィンドウのサイズ変更イベントのイベントリスナーをセットアップおよびクリーンアップします。フックは現在のウィンドウサイズを返します。これは、このフックをインポートおよび使用する任意のコンポーネントで使用できます。

ウィンドウサイズの変更をリアルタイムで監視するためにカスタムフックを実装するにはどうすればよいですか？

ウィンドウサイズの変更をリアルタイムで監視するためのカスタムフックを実装するには、次の手順に従ってください。

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

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

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

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

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

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

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

 <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 id="Current-Window-Size">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フックを使用して現在のウィンドウの寸法を取得します。次に、これらの寸法を表示し、それらを使用して、ウィンドウの幅に基づいて異なるコンテンツを条件付きでレンダリングします。これは、フックをコンポーネントに簡単に統合して、ウィンドウサイズに基づいてUIを動的に更新する方法を示しています。

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