Wie rendere ich die Ansicht in React neu, wenn sich die Größe des Browserfensters ändert?

Ansicht bei Browser-Größenänderung mit React rendern

In React ist es möglich, die Ansicht automatisch zu aktualisieren, wenn die Größe des Browserfensters geändert wird reaktionsschnelle Benutzererfahrung.

Erkennung der Fenstergröße

Das Hinzufügen des Fenstergrößen-Listeners von jQuery ist ein unkomplizierter Ansatz zur Erkennung der Fenstergröße. React bietet jedoch einige weitere React-spezifische Methoden:

React Hooks

React Hooks bieten eine deklarative Möglichkeit, die Handhabung der Fenstergröße hinzuzufügen. Der useWindowSize-Hook kann wie folgt definiert werden:

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

Klassenkomponenten reagieren

Für Klassenkomponenten kann die Lebenszyklusmethode „componentDidMount“ verwendet werden, um mit dem Abhören der Fenstergröße zu beginnen Ereignisse. Der folgende Code demonstriert dies:

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

Durch die Integration der Fenstergrößenerkennung in Ihre React-Anwendung können Sie sicherstellen, dass Ihre Benutzeroberfläche weiterhin reagiert und sich nahtlos an verschiedene Bildschirmgrößen anpasst.

Das obige ist der detaillierte Inhalt vonWie rendere ich die Ansicht in React neu, wenn sich die Größe des Browserfensters ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!