Reagieren Sie auf das Fenstergrößenänderungsereignis in React

In diesem Artikel zeigen wir Ihnen, wie Sie eine React-Komponente einrichten, um den Website-Inhalt zu ändern, wenn sich die Fenstergröße ändert.

Fenstergröße in React ändern

Manchmal müssen React-Entwickler auch reagieren, wenn der Benutzer die Größe des Fensters ändert. Die Reaktion kann unterschiedlich sein, z. B. das Anpassen der Elementgröße, der Schriftgröße, das Ändern des Website-Inhalts oder des Aspekts ihres Erscheinungsbilds.

In einigen Fällen kann es erforderlich sein, Komponenten als Reaktion auf die Größenänderung von Fenstern neu zu rendern.

Funktionale Komponenten bei Fenstergrößenänderung neu rendern

Seit der aktualisierten Version 16.8 von React können funktionale Komponenten Hooks verwenden. Wir können einen benutzerdefinierten Hook erstellen, der jedes Mal aufgerufen wird, wenn er das Ereignis resize erkennt.

Der benutzerdefinierte Hook würde etwa wie folgt aussehen.

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;
}

Sie können diesen benutzerdefinierten Hook verwenden, um Fensterabmessungen als Zustandswerte zu speichern. Daher werden Zustandswerte immer dann aktualisiert, wenn sich die Fenstergröße ändert, wodurch das erneute Rendern ausgelöst wird.

Schauen wir uns einen möglichen Weg an, den useWindowSize-Hook zu verwenden.

Codebeispiel:

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;
}

Hier haben wir eine einfache Web-App mit dem Hook useWindowSize(), der direkt dahinter definiert ist. Dieser Hook gibt ein Array mit zwei Elementen zurück, das erste ist die Breite und das zweite die Höhe.

Wenn wir also diesen Hook in der Komponente App aufrufen, zeigen wir diese Werte entsprechend an.

Ausgang:

Live-Demo

Rendern Sie Klassenkomponenten bei der Größenänderung des Fensters neu

Sie können das gleiche Prinzip in Klassenkomponenten verwenden - Fensterhöhe und -breite in einer Zustandsvariablen speichern. In diesem Fall müssen wir jedoch einen Teil des Codes vom useEffect()-Hook zwischen den Lebenszyklus-Hooks componentDidMount() und componentDidUpdate() aufteilen.

Wenn die Komponente gemountet wird, fügen wir einen Event-Listener hinzu und weisen ihn an, den Event-Handler aufzurufen, den wir im Konstruktor definiert haben. Wir haben auch den Lifecycle-Hook componentDidUpdate() so eingestellt, dass er jedes Mal handleResize() aufruft, wenn die Komponente aktualisiert oder neu gerendert wird.

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>
    );
  }
}

Im Gegensatz zu funktionalen Komponenten verwenden wir hier die Methode setState(), um den Zustand zu aktualisieren, die ein Argument akzeptiert – das neue Zustandsobjekt. Hooks werden in React Class-Komponenten nicht unterstützt.

In JSX referenzieren wir Zustandsvariablen über das Schlüsselwort this, das sich auf die Instanz einer Klasse bezieht. Ansonsten funktioniert alles ähnlich wie bei funktionalen Komponenten.