React でウィンドウのサイズ変更イベントに応答する

Irakli Tchigladze 2023年6月21日

React React Component

この記事では、ウィンドウのサイズが変更されたときに Web サイトのコンテンツを変更するように React コンポーネントをセットアップする方法を説明します。

React でのウィンドウのサイズ変更

React 開発者は、ユーザーがウィンドウのサイズを変更するたびに応答する必要がある場合もあります。要素のサイズ、フォントサイズの調整、Web サイトのコンテンツの変更、または外観の側面など、応答は異なる場合があります。

場合によっては、ウィンドウのサイズ変更に応じてコンポーネントを再レンダリングする必要があります。

ウィンドウのサイズ変更時に機能コンポーネントを再レンダリングする

React がバージョン 16.8 を更新したため、機能コンポーネントはフックを使用できます。 resize イベントを検出するたびに呼び出されるカスタムフックを作成できます。

カスタムフックは次のようになります。

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

function useWindowSize() {
  const [windowSize, setWindowSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateWindowSize() {
      setWindowSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateWindowSize);
    updateWindowSize();
    return () => window.removeEventListener('resize', updateWindowSize);
  }, []);
  return windowSize;
}

このカスタムフックを使用して、ウィンドウの寸法を状態値として格納できます。したがって、ウィンドウサイズが変更されるたびに状態値が更新され、再レンダリングがトリガーされます。

useWindowSize フックを使用する可能な方法を見てみましょう。

コード例:

import "./styles.css";
import React, { useLayoutEffect, useState } from "react";

export default function App() {
  const dimensions = useWindowSize();
  console.log("re-rendered");
  return (
    <div className="App">
      <h1>{"width: " + dimensions[0] + " height:" + dimensions[1]}</h1>
    </div>
  );
}

function useWindowSize() {
  const [windowSize, setWindowSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateWindowSize() {
      setWindowSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener("resize", updateWindowSize);
    updateWindowSize();
    return () => window.removeEventListener("resize", updateWindowSize);
  }, []);
  return windowSize;
}

ここに、直後に定義された useWindowSize() フックを持つ単純な Web アプリがあります。このフックは、2つの項目 (1つ目は幅、2つ目は高さ) を含む配列を返します。

したがって、App コンポーネントでこのフックを呼び出すと、それに応じてこれらの値が表示されます。

出力：

ウィンドウのサイズ変更時に機能コンポーネントを再レンダリング

ライブデモ

ウィンドウのサイズ変更時にクラスコンポーネントを再レンダリングする

クラスコンポーネントでも同じ原則を使用できます。つまり、ウィンドウの高さと幅を状態変数に格納します。ただし、この場合、useEffect() フックのコードの一部を componentDidMount() と componentDidUpdate() ライフサイクルフックに分割する必要があります。

コンポーネントがマウントされたら、イベントリスナーを追加し、コンストラクターで定義したイベントハンドラーを呼び出すように指示します。また、コンポーネントが更新または再レンダリングされるたびに componentDidUpdate() ライフサイクルフックが handleResize() を呼び出すように設定します。

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
          dimensions: []
      }
      this.handleResize = this.setState({dimensions: [window.innerWidth, window.innerHeight]})
  }

  componentDidMount() {
    window.addEventListener("resize", handleResize());
  }
  componentDidUpdate() {
    handleResize()
  }
  render() {
    return (
      <div>{"width: "+ {this.state.dimensions.width} + " " + "height: " + {this.state.dimensions.height}}</div>
    );
  }
}

機能コンポーネントとは異なり、ここでは setState() メソッドを使用して状態を更新します。このメソッドは 1つの引数 (新しい状態オブジェクト) を取ります。フックは React クラスコンポーネントではサポートされていません。

JSX では、クラスのインスタンスを参照する this キーワードを介して状態変数を参照します。それ以外の場合、すべてが機能コンポーネントと同様に機能します。

著者： Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React でのウィンドウのサイズ変更

ウィンドウのサイズ変更時に機能コンポーネントを再レンダリングする

ウィンドウのサイズ変更時にクラス コンポーネントを再レンダリングする

関連記事 - React Component

ウィンドウのサイズ変更時にクラスコンポーネントを再レンダリングする