Wie rendere ich die React-Ansicht bei der Größenänderung des Browsers neu: jQuery vs. React-Centric-Ansatz?

Erneutes Rendern der Ansicht bei Browser-Größenänderung mit React

In der gegebenen React-Anwendung besteht das Ziel darin, die Ansicht neu zu rendern, wenn Die Größe des Browserfensters wird geändert. Dies ermöglicht die dynamische Anpassung von UI-Elementen, wie z. B. die Positionierung von Blöcken in einem Pinterest-ähnlichen Layout.

Verwenden der Window Resize Library:

Ein gängiger Ansatz ist: Verwenden Sie das Fenstergrößenänderungsereignis von jQuery, wie in der Frage vorgeschlagen. Durch Hinzufügen des folgenden Codes können Sie die Komponente bei jeder Größenänderung des Fensters neu rendern:

$( window ).resize(function() {
  // Re-render the component
});

React-Centric Approach:

Es gibt jedoch einen Mehr „React“-Ansatz, um dies mit dem useEffect Hook zu erreichen. Mit diesem Hook können Sie Nebeneffekte in einer Komponente ausführen, z. B. das Abhören von Fensterereignissen. Um useEffect für die Fenstergröße zu verwenden, können Sie einen benutzerdefinierten Hook wie folgt definieren:

import React, { useState, useEffect } from 'react';

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

Sie können diesen Hook dann in Ihrer Komponente verwenden, um auf die Fenstergröße zuzugreifen und bei jeder Änderung ein erneutes Rendern auszulösen:

import React, { useState, useEffect } from 'react';
import { useWindowSize } from './useWindowSize';

function MyApp() {
  // ...
  const [windowSize, setWindowSize] = useWindowSize();

  useEffect(() => {
    // Re-render the component when the window size changes
    setWindowSize(useWindowSize());
  }, [windowSize]);

  return (
    // ...
  );
}

Dieser Ansatz ist stärker gekapselt und folgt den Lebenszyklusmustern von React, sodass der Code Ihrer Komponente sauber und wartbar bleibt.

Das obige ist der detaillierte Inhalt vonWie rendere ich die React-Ansicht bei der Größenänderung des Browsers neu: jQuery vs. React-Centric-Ansatz?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!