Wie rendere ich die Ansicht bei Browser-Größenänderung in React neu: jQuery vs. React-Hooks und -Klassen?

Ansicht im Browser rendern und Größe mit React ändern

Hintergrund

Mit React können Sie das Layout von Elementen auf einer Webseite basierend auf dem Browser dynamisch anpassen Fenstergröße. Allerdings können Probleme auftreten, wenn die Fenstergröße geändert wird und die Ansicht nicht automatisch aktualisiert wird. Dieser Artikel befasst sich mit einer häufig gestellten Frage: Wie löst man ein erneutes Rendern aus, wenn die Größe des Browserfensters geändert wird? Blockkomponente, die einzelne Blöcke auf der Seite darstellt, und eine Blockkomponente, die eine Sammlung von Blöcken darstellt:

Frage

Anstatt das Fenstergrößenänderungsereignis von jQuery zu verwenden, gibt es eine eher „reagierende“ Möglichkeit zum Zuhören für Ereignisse zur Größenänderung des Browsers und zum Auslösen eines erneuten Renderns?

Antwort

Verwenden von React Hooks

React Hooks bieten einen saubereren und funktionaleren Ansatz. Sie können einen benutzerdefinierten Hook erstellen, der auf das Fenstergrößenänderungsereignis lauscht:

Verwenden von React-Klassen

In React-Klassen können Sie auf Größenänderungsereignisse in der Lebenszyklusmethode „componentDidMount“ warten:

<code class="javascript">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 Ansatz ist ausführlicher, bietet aber dennoch eine saubere Implementierung.

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