ブラウザウィンドウのサイズが変更されたときにReactでビューを再レンダリングするにはどうすればよいですか?

React を使用したブラウザのサイズ変更時のビューのレンダリング

React では、ブラウザ ウィンドウのサイズが変更されたときにビューを自動的に更新することができます。応答性の高いユーザー エクスペリエンス。

ウィンドウ サイズ変更の検出

jQuery のウィンドウ サイズ変更リスナーを追加することは、ウィンドウ サイズ変更を検出する簡単な方法です。ただし、React には、さらに React 固有のメソッドがいくつか用意されています。

React Hooks

React Hooks は、ウィンドウのサイズ変更処理を追加する宣言的な方法を提供します。 useWindowSize フックは次のように定義できます。

<code class="javascript">import React, { useLayoutEffect, useState } from 'react';

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

React クラス コンポーネント

クラス コンポーネントの場合、ライフサイクル メソッドのcomponentDidMount を使用してウィンドウのサイズ変更のリッスンを開始できます。イベント。次のコードはこれを示しています。

<code class="javascript">import React from 'react';

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };

  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  render() {
    return <span>Window size: {this.state.width} x {this.state.height}</span>;
  }
}</code>

ウィンドウのサイズ変更検出を React アプリケーションに組み込むことで、UI の応答性を維持し、さまざまな画面サイズにシームレスに適応することができます。

以上がブラウザウィンドウのサイズが変更されたときにReactでビューを再レンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。