Comment puis-je déclencher le nouveau rendu dans React lors du redimensionnement de la fenêtre du navigateur ?

Comment déclencher un nouveau rendu React lors du redimensionnement de la fenêtre du navigateur

Contexte

Dans React, optimisation des mises à jour des vues en fonction de facteurs externes tels que la fenêtre du navigateur le redimensionnement est crucial, en particulier pour les mises en page. Une approche consiste à tirer parti de l'événement de redimensionnement de la fenêtre du navigateur.

Approche React Hook

Modern React utilise des hooks pour gérer de tels scénarios avec élégance. Vous pouvez créer un hook personnalisé qui écoute les événements de redimensionnement :

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

Ce hook peut être utilisé dans n'importe quel composant nécessitant des informations sur la taille de la fenêtre pour le nouveau rendu.

Composant basé sur la classe React Approche

Pour les composants basés sur une classe, il est recommandé d'écouter l'événement resize dans composantDidMount. Cela garantit que le composant met à jour son état avec les dimensions initiales de l'écran :

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

En employant ces techniques, vous pouvez facilement déclencher des rerendus React lorsque la fenêtre du navigateur est redimensionnée, garantissant ainsi des mises à jour de mise en page optimales et un comportement réactif. pour votre candidature.

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!