Comment restituer la vue lors du redimensionnement du navigateur dans React : jQuery vs React Hooks and Classes ?

Rendu la vue lors du redimensionnement du navigateur avec React

Arrière-plan

En utilisant React, vous pouvez ajuster dynamiquement la disposition des éléments sur une page Web en fonction du navigateur taille de la fenêtre. Cependant, vous pouvez rencontrer des problèmes lorsque la fenêtre est redimensionnée et que la vue ne se met pas automatiquement à jour. Cet article répond à une question courante : comment déclencher un nouveau rendu lorsque la fenêtre du navigateur est redimensionnée.

Code

Considérez l'application React suivante avec une hiérarchie de composants composée d'un composant MyApp, d'un Composant Block représentant des blocs individuels sur la page et un composant Blocks représentant une collection de blocs :

Question

Au lieu d'utiliser l'événement de redimensionnement de fenêtre de jQuery, existe-t-il une manière plus "React" d'écouter pour les événements de redimensionnement du navigateur et déclencher le nouveau rendu ?

Réponse

Utiliser les React Hooks

Les React Hooks offrent une approche plus propre et plus fonctionnelle. Vous pouvez créer un Hook personnalisé qui écoute l'événement de redimensionnement de la fenêtre :

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

Utilisation des classes React

Dans les classes React, vous pouvez écouter les événements de redimensionnement dans la méthode de cycle de vie composantDidMount :

<code class="javascript">componentDidMount() {
  window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
  window.removeEventListener('resize', this.updateDimensions);
}</code>

Cette approche est plus verbeuse mais fournit toujours une implémentation propre.

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!