Rendre la vue sur le navigateur redimensionner avec React

Comment puis-je demander à React de restituer la vue lorsque la fenêtre du navigateur est redimensionnée?

Contexte

J'ai des blocs que je souhaite mettre en page individuellement sur la page, mais je veux également qu'ils soient mis à jour lorsque la fenêtre du navigateur change. Le résultat final sera quelque chose comme la mise en page Pinterest de Ben Holland , mais écrit en utilisant React et pas seulement jQuery. Je suis encore loin.

Code

Voici mon application:

var MyApp = React.createClass({
  //does the http get from the server
  loadBlocksFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      mimeType: 'textPlain',
      success: function(data) {
        this.setState({data: data.events});
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    this.loadBlocksFromServer();

  },    
  render: function() {
    return (
        <div>
      <Blocks data={this.state.data}/>
      </div>
    );
  }
});

React.renderComponent(
  <MyApp url="url_here"/>,
  document.getElementById('view')
)

Ensuite, j'ai le Blockcomposant (équivalent à un Pindans l'exemple Pinterest ci-dessus):

var Block = React.createClass({
  render: function() {
    return (
        <div class="dp-block" style={{left: this.props.top, top: this.props.left}}>
        <h2>{this.props.title}</h2>
        <p>{this.props.children}</p>
        </div>
    );
  }
});

et la liste / collection de Blocks:

var Blocks = React.createClass({

  render: function() {

    //I've temporarily got code that assigns a random position
    //See inside the function below...

    var blockNodes = this.props.data.map(function (block) {   
      //temporary random position
      var topOffset = Math.random() * $(window).width() + 'px'; 
      var leftOffset = Math.random() * $(window).height() + 'px'; 
      return <Block order={block.id} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;
    });

    return (
        <div>{blockNodes}</div>
    );
  }
});

Question

Dois-je ajouter un redimensionnement de la fenêtre de jQuery? Si oui, où?

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

Existe-t-il une façon plus «réactive» de procéder?

Utilisation des crochets React:

Vous pouvez définir un hook personnalisé qui écoute l' resizeévénement window , quelque chose comme ceci:

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

function ShowWindowDimensions(props) {
  const [width, height] = useWindowSize();
  return <span>Window size: {width} x {height}</span>;
}

L'avantage ici est que la logique est encapsulée, et vous pouvez utiliser ce crochet où vous voulez utiliser la taille de la fenêtre.

Utilisation des classes React:

Vous pouvez écouter dans componentDidMount, quelque chose comme ce composant qui affiche simplement les dimensions de la fenêtre (comme <span>Window size: 1024 x 768</span>):

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

@SophieAlpert a raison, +1, je veux juste fournir une version modifiée de sa solution, sans jQuery , basée sur cette réponse .

var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {

    var w = window,
        d = document,
        documentElement = d.documentElement,
        body = d.getElementsByTagName('body')[0],
        width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
        height = w.innerHeight|| documentElement.clientHeight|| body.clientHeight;

        this.setState({width: width, height: height});
        // if you are using ES2015 I'm pretty sure you can do this: this.setState({width, height});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});

Une solution très simple:

resize = () => this.forceUpdate()

componentDidMount() {
  window.addEventListener('resize', this.resize)
}

componentWillUnmount() {
  window.removeEventListener('resize', this.resize)
}

C'est un exemple simple et court d'utilisation d'es6 sans jQuery.

import React, { Component } from 'react';

export default class CreateContact extends Component {
  state = {
    windowHeight: undefined,
    windowWidth: undefined
  }

  handleResize = () => this.setState({
    windowHeight: window.innerHeight,
    windowWidth: window.innerWidth
  });

  componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  render() {
    return (
      <span>
        {this.state.windowWidth} x {this.state.windowHeight}
      </span>
    );
  }
}

crochets

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

let App = () => {
  const [windowWidth, setWindowWidth] = useState(0);
  const [windowHeight, setWindowHeight] = useState(0);
  let resizeWindow = () => {
    setWindowWidth(window.innerWidth);
    setWindowHeight(window.innerHeight);
  };

  useEffect(() => {
    resizeWindow();
    window.addEventListener("resize", resizeWindow);
    return () => window.removeEventListener("resize", resizeWindow);
  }, []);

  return (
    <div>
      <span>
        {windowWidth} x {windowHeight}
      </span>
    </div>
  );
};

À partir de React 16.8, vous pouvez utiliser des crochets !

/* globals window */
import React, { useState, useEffect } from 'react'
import _debounce from 'lodash.debounce'

const Example = () => {
  const [width, setWidth] = useState(window.innerWidth)

  useEffect(() => {
    const handleResize = _debounce(() => setWidth(window.innerWidth), 100)

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, [])

  return <>Width: {width}</>
}

Edit 2018 : maintenant React a un support de première classe pour le contexte

Je vais essayer de donner une réponse générique, qui cible ce problème spécifique mais aussi un problème plus général.

Si vous ne vous souciez pas des bibliothèques d' effets secondaires, vous pouvez simplement utiliser quelque chose comme Packery

Si vous utilisez Flux, vous pouvez créer un magasin contenant les propriétés de la fenêtre afin de conserver une fonction de rendu pure sans avoir à interroger l'objet fenêtre à chaque fois.

Dans d'autres cas, lorsque vous souhaitez créer un site Web réactif mais que vous préférez les styles en ligne React aux requêtes multimédias ou que le comportement HTML / JS change en fonction de la largeur de la fenêtre, continuez à lire:

Qu'est-ce que le contexte React et pourquoi j'en parle

Le contexte React n'est pas dans l'API publique et permet de transmettre des propriétés à toute une hiérarchie de composants.

Le contexte React est particulièrement utile pour transmettre à l'ensemble de votre application des choses qui ne changent jamais (il est utilisé par de nombreux frameworks Flux via un mixin). Vous pouvez l'utiliser pour stocker des invariants commerciaux d'application (comme l'ID utilisateur connecté, afin qu'il soit disponible partout).

Mais il peut également être utilisé pour stocker des choses qui peuvent changer. Le problème est que lorsque le contexte change, tous les composants qui l'utilisent doivent être restitués et ce n'est pas facile à faire, la meilleure solution est souvent de démonter / remonter l'application entière avec le nouveau contexte. N'oubliez pas que forceUpdate n'est pas récursif .

Donc, comme vous le comprenez, le contexte est pratique, mais il y a un impact sur les performances lorsqu'il change, il ne devrait donc pas changer trop souvent.

Que mettre en contexte

• Invariants: comme le userId connecté, sessionToken, peu importe ...
• Des choses qui ne changent pas souvent

Voici des choses qui ne changent pas souvent:

La langue actuelle de l'utilisateur :

Il ne change pas très souvent, et quand il le fait, comme toute l'application est traduite, nous devons tout restituer: une très belle utilisation du changement de langage à chaud

Les propriétés de la fenêtre

La largeur et la hauteur ne changent pas souvent, mais lorsque nous le faisons, notre disposition et notre comportement peuvent devoir s'adapter. Pour la mise en page, il est parfois facile de personnaliser avec les médias CSS, mais parfois ce n'est pas le cas et nécessite une structure HTML différente. Pour le comportement, vous devez gérer cela avec Javascript.

Vous ne voulez pas tout restituer à chaque événement de redimensionnement, vous devez donc annuler les événements de redimensionnement.

Ce que je comprends de votre problème, c'est que vous voulez savoir combien d'éléments afficher en fonction de la largeur de l'écran. Vous devez donc d'abord définir des points d'arrêt réactifs et énumérer le nombre de types de disposition différents que vous pouvez avoir.

Par exemple:

• Disposition "1col", pour une largeur <= 600
• Disposition "2col", pour 600 <largeur <1000
• Disposition "3col", pour 1000 <= largeur

Lors des événements de redimensionnement (anti-rebond), vous pouvez facilement obtenir le type de mise en page actuel en interrogeant l'objet fenêtre.

Ensuite, vous pouvez comparer le type de mise en page avec l'ancien type de mise en page, et s'il a changé, restituez l'application avec un nouveau contexte: cela permet d'éviter de restituer l'application du tout lorsque l'utilisateur a déclenché des événements de redimensionnement mais en fait le le type de mise en page n'a pas changé, vous ne devez donc effectuer un nouveau rendu qu'en cas de besoin.

Une fois que vous avez cela, vous pouvez simplement utiliser le type de mise en page à l'intérieur de votre application (accessible via le contexte) afin de pouvoir personnaliser le HTML, le comportement, les classes CSS ... Vous connaissez votre type de mise en page dans la fonction de rendu React, cela signifie donc que vous peut écrire en toute sécurité des sites Web réactifs en utilisant des styles en ligne, et n'a pas besoin du tout de mediaqueries.

Si vous utilisez Flux, vous pouvez utiliser un magasin au lieu du contexte React, mais si votre application a beaucoup de composants réactifs, il est peut-être plus simple d'utiliser le contexte?

J'utilise la solution de @senornestor, mais pour être tout à fait correct, vous devez également supprimer l'écouteur d'événements:

componentDidMount() {
    window.addEventListener('resize', this.handleResize);
}

componentWillUnmount(){
    window.removeEventListener('resize', this.handleResize);
}

handleResize = () => {
    this.forceUpdate();
};

Sinon, vous obtiendrez l'avertissement:

Avertissement: forceUpdate (...): ne peut mettre à jour qu'un composant monté ou monté. Cela signifie généralement que vous avez appelé forceUpdate () sur un composant non monté. C'est un no-op. Veuillez vérifier le code du composant XXX.

Je sauterais toutes les réponses ci-dessus et commencerais à utiliser le react-dimensionscomposant d'ordre supérieur.

https://github.com/digidem/react-dimensions

Ajoutez simplement un simple importet un appel de fonction, et vous pouvez accéder à this.props.containerWidthet this.props.containerHeightdans votre composant.

// Example using ES6 syntax
import React from 'react'
import Dimensions from 'react-dimensions'

class MyComponent extends React.Component {
  render() (
    <div
      containerWidth={this.props.containerWidth}
      containerHeight={this.props.containerHeight}
    >
    </div>
  )
}

export default Dimensions()(MyComponent) // Enhanced component

Ce code utilise la nouvelle API de contexte React :

  import React, { PureComponent, createContext } from 'react';

  const { Provider, Consumer } = createContext({ width: 0, height: 0 });

  class WindowProvider extends PureComponent {
    state = this.getDimensions();

    componentDidMount() {
      window.addEventListener('resize', this.updateDimensions);
    }

    componentWillUnmount() {
      window.removeEventListener('resize', this.updateDimensions);
    }

    getDimensions() {
      const w = window;
      const d = document;
      const documentElement = d.documentElement;
      const body = d.getElementsByTagName('body')[0];
      const width = w.innerWidth || documentElement.clientWidth || body.clientWidth;
      const height = w.innerHeight || documentElement.clientHeight || body.clientHeight;

      return { width, height };
    }

    updateDimensions = () => {
      this.setState(this.getDimensions());
    };

    render() {
      return <Provider value={this.state}>{this.props.children}</Provider>;
    }
  }

Ensuite, vous pouvez l'utiliser où vous le souhaitez dans votre code comme ceci:

<WindowConsumer>
  {({ width, height }) =>  //do what you want}
</WindowConsumer>

Vous n'avez pas nécessairement besoin de forcer un nouveau rendu.

Cela pourrait ne pas aider OP, mais dans mon cas, je n'avais besoin que de mettre à jour les attributs widthet heightsur ma toile (ce que vous ne pouvez pas faire avec CSS).

Cela ressemble à ceci:

import React from 'react';
import styled from 'styled-components';
import {throttle} from 'lodash';

class Canvas extends React.Component {

    componentDidMount() {
        window.addEventListener('resize', this.resize);
        this.resize();
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.resize);
    }

    resize = throttle(() => {
        this.canvas.width = this.canvas.parentNode.clientWidth;
        this.canvas.height = this.canvas.parentNode.clientHeight;
    },50)

    setRef = node => {
        this.canvas = node;
    }

    render() {
        return <canvas className={this.props.className} ref={this.setRef} />;
    }
}

export default styled(Canvas)`
   cursor: crosshair;
`

Je ne sais pas si c'est la meilleure approche, mais ce qui a fonctionné pour moi a d'abord été de créer un magasin, je l'ai appelé WindowStore:

import {assign, events} from '../../libs';
import Dispatcher from '../dispatcher';
import Constants from '../constants';

let CHANGE_EVENT = 'change';
let defaults = () => {
    return {
        name: 'window',
        width: undefined,
        height: undefined,
        bps: {
            1: 400,
            2: 600,
            3: 800,
            4: 1000,
            5: 1200,
            6: 1400
        }
    };
};
let save = function(object, key, value) {
    // Save within storage
    if(object) {
        object[key] = value;
    }

    // Persist to local storage
    sessionStorage[storage.name] = JSON.stringify(storage);
};
let storage;

let Store = assign({}, events.EventEmitter.prototype, {
    addChangeListener: function(callback) {
        this.on(CHANGE_EVENT, callback);
        window.addEventListener('resize', () => {
            this.updateDimensions();
            this.emitChange();
        });
    },
    emitChange: function() {
        this.emit(CHANGE_EVENT);
    },
    get: function(keys) {
        let value = storage;

        for(let key in keys) {
            value = value[keys[key]];
        }

        return value;
    },
    initialize: function() {
        // Set defaults
        storage = defaults();
        save();
        this.updateDimensions();
    },
    removeChangeListener: function(callback) {
        this.removeListener(CHANGE_EVENT, callback);
        window.removeEventListener('resize', () => {
            this.updateDimensions();
            this.emitChange();
        });
    },
    updateDimensions: function() {
        storage.width =
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
        storage.height =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight;
        save();
    }
});

export default Store;

Ensuite, j'ai utilisé ce magasin dans mes composants, un peu comme ceci:

import WindowStore from '../stores/window';

let getState = () => {
    return {
        windowWidth: WindowStore.get(['width']),
        windowBps: WindowStore.get(['bps'])
    };
};

export default React.createClass(assign({}, base, {
    getInitialState: function() {
        WindowStore.initialize();

        return getState();
    },
    componentDidMount: function() {
        WindowStore.addChangeListener(this._onChange);
    },
    componentWillUnmount: function() {
        WindowStore.removeChangeListener(this._onChange);
    },
    render: function() {
        if(this.state.windowWidth < this.state.windowBps[2] - 1) {
            // do something
        }

        // return
        return something;
    },
    _onChange: function() {
        this.setState(getState());
    }
}));

Pour info, ces fichiers ont été partiellement rognés.

Je sais que cela a été répondu, mais je pensais juste partager ma solution car la meilleure réponse, bien que géniale, peut maintenant être un peu dépassée.

    constructor (props) {
      super(props)

      this.state = { width: '0', height: '0' }

      this.initUpdateWindowDimensions = this.updateWindowDimensions.bind(this)
      this.updateWindowDimensions = debounce(this.updateWindowDimensions.bind(this), 200)
    }

    componentDidMount () {
      this.initUpdateWindowDimensions()
      window.addEventListener('resize', this.updateWindowDimensions)
    }

    componentWillUnmount () {
      window.removeEventListener('resize', this.updateWindowDimensions)
    }

    updateWindowDimensions () {
      this.setState({ width: window.innerWidth, height: window.innerHeight })
    }

La seule différence est que je fais rebondir (uniquement toutes les 200 ms) les updateWindowDimensions sur l'événement resize pour augmenter un peu les performances, MAIS je ne les rebondis pas quand il est appelé sur ComponentDidMount.

Je trouvais que le rebounce le rendait assez lent à monter parfois si vous avez une situation où il monte souvent.

Juste une optimisation mineure mais j'espère que cela aide quelqu'un!

Juste pour améliorer la solution de @ senornestor à utiliser forceUpdateet la solution de @ gkri pour supprimer l' resizeécouteur d'événements lors du démontage du composant:

1. n'oubliez pas d'accélérer (ou de rebondir) l'appel à redimensionner
2. assurez-vous que bind(this)dans le constructeur

import React from 'react'
import { throttle } from 'lodash'

class Foo extends React.Component {
  constructor(props) {
    super(props)
    this.resize = throttle(this.resize.bind(this), 100)
  }

  resize = () => this.forceUpdate()

  componentDidMount() {
    window.addEventListener('resize', this.resize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
  }

  render() {
    return (
      <div>{window.innerWidth} x {window.innerHeight}</div>
    )
  }
}

Une autre méthode consiste à utiliser simplement un état "factice" au lieu de forceUpdate:

import React from 'react'
import { throttle } from 'lodash'

class Foo extends React.Component {
  constructor(props) {
    super(props)
    this.state = { foo: 1 }
    this.resize = throttle(this.resize.bind(this), 100)
  }

  resize = () => this.setState({ foo: 1 })

  componentDidMount() {
    window.addEventListener('resize', this.resize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
  }

  render() {
    return (
      <div>{window.innerWidth} x {window.innerHeight}</div>
    )
  }
}

componentDidMount() {

    // Handle resize
    window.addEventListener('resize', this.handleResize);
}




handleResize = () => {
    this.renderer.setSize(this.mount.clientWidth, this.mount.clientHeight);
    this.camera.aspect = this.mount.clientWidth / this.mount.clientHeight;
    this.camera.updateProjectionMatrix();
};

Il suffit de définir la fonction d'événement de redimensionnement.

Mettez ensuite à jour la taille du rendu (canevas), attribuez un nouveau format d'image à la caméra.

Le démontage et le rappel est une solution folle à mon avis ....

ci-dessous est le support si nécessaire.

            <div
                className={this.state.canvasActive ? 'canvasContainer isActive' : 'canvasContainer'}
                ref={mount => {
                    this.mount = mount;
                }}
            />

Je voulais partager cette chose assez cool que je viens de trouver en utilisant window.matchMedia

const mq = window.matchMedia('(max-width: 768px)');

  useEffect(() => {
    // initial check to toggle something on or off
    toggle();

    // returns true when window is <= 768px
    mq.addListener(toggle);

    // unmount cleanup handler
    return () => mq.removeListener(toggle);
  }, []);

  // toggle something based on matchMedia event
  const toggle = () => {
    if (mq.matches) {
      // do something here
    } else {
      // do something here
    }
  };

.matches renvoie true ou false si la fenêtre est supérieure ou inférieure à la valeur de largeur maximale spécifiée, cela signifie qu'il n'est pas nécessaire de limiter l'écouteur, car matchMedia ne se déclenche qu'une seule fois lorsque le booléen change.

Mon code peut facilement être ajusté pour inclure useStatepour enregistrer les retours booléens matchMedia, et l'utiliser pour rendre conditionnellement un composant, déclencher une action, etc.

J'ai dû le lier à «this» dans le constructeur pour le faire fonctionner avec la syntaxe de classe

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.resize = this.resize.bind(this)      
  }
  componentDidMount() {
    window.addEventListener('resize', this.resize)
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
  }
}

Merci à tous pour les réponses. Voici mon React + Recompose . Il s'agit d'une fonction d'ordre élevé qui inclut les propriétés windowHeightet windowWidthdu composant.

const withDimensions = compose(
 withStateHandlers(
 ({
   windowHeight,
   windowWidth
 }) => ({
   windowHeight: window.innerHeight,
   windowWidth: window.innerWidth
 }), {
  handleResize: () => () => ({
    windowHeight: window.innerHeight,
    windowWidth: window.innerWidth
  })
 }),
 lifecycle({
   componentDidMount() {
   window.addEventListener('resize', this.props.handleResize);
 },
 componentWillUnmount() {
  window.removeEventListener('resize');
 }})
)

https://github.com/renatorib/react-sizes est un HOC pour ce faire tout en conservant de bonnes performances.

import React from 'react'
import withSizes from 'react-sizes'

@withSizes(({ width }) => ({ isMobile: width < 480 }))
class MyComponent extends Component {
  render() {
    return <div>{this.props.isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
  }
}

export default MyComponent

Pour cette raison, il vaut mieux utiliser ces données à partir de données de fichiers CSS ou JSON, puis avec ces données, définir un nouvel état avec this.state ({width: "some value", height: "some value"}); ou écrire du code qui utilise des données d'écran de largeur dans le travail autonome si vous souhaitez afficher des images réactives