Wie kann ich als Reaktion auf die Größenänderung des Browserfensters ein erneutes Rendern auslösen?

So lösen Sie ein erneutes Rendern von React bei der Größenänderung des Browserfensters aus

Kontext

In React werden Ansichtsaktualisierungen basierend auf externen Faktoren wie dem Browserfenster optimiert Insbesondere bei Layouts ist die Größenänderung von entscheidender Bedeutung. Ein Ansatz besteht darin, das Fenstergrößenänderungsereignis des Browsers zu nutzen.

React-Hook-Ansatz

Modern React verwendet Hooks, um solche Szenarien elegant zu handhaben. Sie können einen benutzerdefinierten Hook erstellen, der auf Größenänderungsereignisse lauscht:

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

Dieser Hook kann in jeder Komponente verwendet werden, die Informationen zur Fenstergröße für das erneute Rendern benötigt.

Reagieren Sie auf klassenbasierte Komponenten Ansatz

Für klassenbasierte Komponenten wird empfohlen, das Resize-Ereignis in ComponentDidMount abzuhören. Dadurch wird sichergestellt, dass die Komponente ihren Status mit den anfänglichen Bildschirmabmessungen aktualisiert:

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

Durch den Einsatz dieser Techniken können Sie mühelos React-Re-Renderings auslösen, wenn die Größe des Browserfensters geändert wird, und so optimale Layoutaktualisierungen und Reaktionsverhalten gewährleisten für Ihre Bewerbung.

Das obige ist der detaillierte Inhalt vonWie kann ich als Reaktion auf die Größenänderung des Browserfensters ein erneutes Rendern auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!