ブラウザのサイズ変更時に React View を再レンダリングする方法: jQuery と React 中心のアプローチ?-jsチュートリアル-php.cn

ブラウザのサイズ変更時に React View を再レンダリングする方法: jQuery と React 中心のアプローチ?

Mary-Kate Olsen

リリース： 2024-10-19 19:37:01

オリジナル

844 人が閲覧しました

How to Re-render React View on Browser Resize: jQuery vs React-Centric Approach?

React によるブラウザのサイズ変更時のビューの再レンダリング

指定された React アプリケーションでの目標は、次の場合にビューを再レンダリングすることです。ブラウザウィンドウのサイズが変更されます。これにより、Pinterest のようなレイアウトでのブロックの位置決めなど、UI 要素を動的に調整できます。

ウィンドウサイズ変更ライブラリの使用:

一般的なアプローチの 1 つは、次のとおりです。質問で示唆されているように、jQueryのウィンドウサイズ変更イベントを使用してください。次のコードを追加すると、ウィンドウのサイズが変更されるたびにコンポーネントを再レンダリングできます:

$( window ).resize(function() {
  // Re-render the component
});

ログイン後にコピー

React 中心のアプローチ:

ただし、 useEffect フックを使用してこれを実現するための「React」アプローチをさらに詳しく説明します。このフックを使用すると、ウィンドウイベントのリッスンなど、コンポーネントで副作用を実行できます。ウィンドウのサイズ変更に useEffect を使用するには、次のようなカスタムフックを定義できます。

import React, { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

ログイン後にコピー

コンポーネント内でこのフックを使用すると、ウィンドウサイズにアクセスし、ウィンドウサイズが変更されるたびに再レンダリングをトリガーできます。

import React, { useState, useEffect } from 'react';
import { useWindowSize } from './useWindowSize';

function MyApp() {
  // ...
  const [windowSize, setWindowSize] = useWindowSize();

  useEffect(() => {
    // Re-render the component when the window size changes
    setWindowSize(useWindowSize());
  }, [windowSize]);

  return (
    // ...
  );
}

ログイン後にコピー

このアプローチはよりカプセル化されており、React のライフサイクルパターンに従い、コンポーネントのコードをクリーンで保守しやすく保ちます。

以上がブラウザのサイズ変更時に React View を再レンダリングする方法: jQuery と React 中心のアプローチ?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。