Comment restituer la vue React lors du redimensionnement du navigateur : approche jQuery vs React-Centric ?

Restituer la vue lors du redimensionnement du navigateur avec React

Dans l'application React donnée, l'objectif est de restituer la vue lorsque la fenêtre du navigateur est redimensionnée. Cela permet l'ajustement dynamique des éléments de l'interface utilisateur, tels que le positionnement des blocs dans une disposition de type Pinterest.

Utilisation de la bibliothèque de redimensionnement de fenêtre :

Une approche courante consiste à utilisez l'événement de redimensionnement de fenêtre de jQuery, comme suggéré dans la question. En ajoutant le code suivant, vous pouvez restituer le composant chaque fois que la fenêtre est redimensionnée :

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

Approche React-Centric :

Cependant, il existe un une approche plus "React" pour y parvenir en utilisant le useEffect Hook. Ce Hook vous permet d'effectuer des effets secondaires dans un composant, comme l'écoute des événements de fenêtre. Pour utiliser useEffect pour le redimensionnement de la fenêtre, vous pouvez définir un Hook personnalisé comme celui-ci :

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

Vous pouvez ensuite utiliser ce Hook dans votre composant pour accéder à la taille de la fenêtre et déclencher un nouveau rendu à chaque fois qu'elle change :

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 (
    // ...
  );
}

Cette approche est plus encapsulée et suit les modèles de cycle de vie de React, gardant le code de votre composant propre et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!