ホームページ >ウェブフロントエンド >jsチュートリアル >ブラウザウィンドウのサイズ変更時に React で再レンダリングをトリガーするにはどうすればよいですか?

ブラウザウィンドウのサイズ変更時に React で再レンダリングをトリガーするにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-19 19:37:29573ブラウズ

How Can I Trigger Re-Rendering in React Upon Browser Window Resize?

ブラウザ ウィンドウのサイズ変更で React の再レンダリングをトリガーする方法

コンテキスト

React では、ブラウザ ウィンドウなどの外部要因に基づいてビューの更新を最適化しますサイズ変更は、特にレイアウトの場合に重要です。 1 つのアプローチは、ブラウザのウィンドウ サイズ変更イベントを活用することです。

React フック アプローチ

最新の React は、フックを採用してこのようなシナリオをエレガントに処理します。サイズ変更イベントをリッスンするカスタム フックを作成できます。

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

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function 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 };
  render() {
    return (
      <span>
        Window size: {this.state.width} x {this.state.height}
      </span>
    );
  }
  updateDimensions = () => {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };
  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
}</code>

これらの手法を採用することで、ブラウザ ウィンドウのサイズが変更されたときに React の再レンダリングを簡単にトリガーでき、最適なレイアウトの更新と応答性の高い動作を保証できます。あなたのアプリケーションのために。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。