React でウィンドウのサイズ変更イベントに応答する
この記事では、ウィンドウのサイズが変更されたときに 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn