Procesar la vista en el navegador de cambiar el tamaño de Reaccionar con

El Uso De Reaccionar Ganchos:

Puede definir una costumbre Gancho que escucha a la ventana resize evento, algo como esto:

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

La ventaja aquí es la lógica que está encapsulado, y usted puede utilizar este enlace en cualquier lugar que usted desea usar el tamaño de la ventana.

El uso de Reaccionar clases:

Se puede escuchar en componentDidMount, algo parecido a este componente que sólo muestra las dimensiones de la ventana (como <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 es correcto, +1, solo quiero ofrecer una versión modificada de su solución, sin jQuery, basado en esta respuesta.

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

Una solución muy simple:

resize = () => this.forceUpdate()

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

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

Es una forma simple y breve ejemplo del uso de es6 sin 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>
    );
  }
}

ganchos

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

Como de Reaccionar 16.8 puede utilizar Ganchos!

/* 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}</>
}

Edición de 2018: ahora Reaccionan de primera clase de apoyo para contexto

Voy a tratar de dar una respuesta genérica, que se dirige a este problema, pero un problema más general también.

Si usted no se preocupan por los efectos secundarios libs, usted puede simplemente utilizar algo como Packery

Si utiliza Fundente, podría crear una tienda que contienen la ventana de propiedades de forma que se mantenga un puro representar la función sin tener que consultar el objeto de la ventana cada vez.

En otros casos donde usted quiere construir un sitio web responsive, pero prefiere Reaccionar estilos en línea para consultas de medios de comunicación, o si desea que el HTML/JS comportamiento a cambios de acuerdo al ancho de la ventana, sigue leyendo:

¿Qué es Reaccionar contexto y por qué hablo de ella

Reaccionar contexto una no está en la API pública y permite pasar de las propiedades de toda una jerarquía de componentes.

Reaccionar contexto es particularmente útil para pasar a la totalidad de su aplicación las cosas que nunca cambia (es utilizado por muchos de Flujo de marcos a través de un mixin). Se puede utilizar para la aplicación de la tienda de negocios invariantes (como el conectado id de usuario, por lo que está disponible en todas partes).

Pero también puede ser utilizado para almacenar cosas que pueden cambiar. El problema es que cuando los cambios de contexto, todos los componentes que uso debe ser re-renderizados y no es fácil hacerlo, la mejor solución es a menudo para desmontar/montar el conjunto de la aplicación con el nuevo contexto. Recuerde forceUpdate no es recursiva.

Así como entender el contexto es práctico, pero no hay un impacto en el rendimiento cuando se cambia, por lo que se debe más bien a que no cambian a menudo.

Qué poner en contexto

• Invariantes: como conectado userId, sessionToken, lo que sea…
• Cosas que no cambian con frecuencia

Aquí hay cosas que no cambian con frecuencia:

El actual idioma del usuario:

No cambia muy oftenly, y cuando lo hace, como toda la aplicación está traducida tenemos que volver a hacer todo: un muy buen caso de uso de caliente langage cambio

La ventana de propiedades de

La anchura y la altura para que no cambian con frecuencia, pero cuando hacemos nuestro diseño y el comportamiento pueden tener que adaptarse. Para el diseño, a veces, es fácil de personalizar con CSS técnicaconsultas, pero a veces no lo es y requiere de una diferente estructura HTML. Para el comportamiento que usted tiene que manejar esto con Javascript.

No quieres volver a hacer todo en cada evento de cambio de tamaño, por lo que debes de rebote de los eventos de cambio de tamaño.

Lo que entiendo de tu problema es que quieres saber cuántos elementos de la pantalla de acuerdo al ancho de la pantalla. Así que en primer lugar tiene que definir sensible puntos de interrupción, y enumerar el número de diferentes tipos de disposición de que se puede tener.

Por ejemplo:

• Diseño «1col», para ancho de <= 600
• Diseño «2col», para 600 < width < 1000
• Diseño «3col», para 1000 <= ancho

Sobre eventos de cambio de tamaño (rebotada), usted puede conseguir fácilmente el actual tipo de diseño, mediante la consulta de la ventana de objetos.

A continuación, puede comparar el tipo de diseño con el antiguo tipo de diseño, y si ha cambiado, vuelva a procesar la aplicación con un nuevo contexto: esto permite evitar la re-representación de la aplicación cuando el usuario ha de desencadenar eventos de cambio de tamaño, pero en realidad el tipo de diseño no ha cambiado, por lo que sólo se reproducen cuando sea necesario.

Una vez que tienes eso, puedes simplemente utilizar el tipo de diseño dentro de la aplicación (accesible a través del contexto), de modo que usted puede personalizar el HTML, el comportamiento, las clases CSS… Usted sabe que su tipo de diseño en el interior del Reaccionan de procesamiento función, así que esto significa que usted puede escribir con seguridad de sitios web sensibles mediante el uso de estilos en línea, y no es necesario técnicaconsultas a todos.

Si utiliza Fundente, puede utilizar una tienda en lugar de Reaccionar de contexto, pero si tu aplicación tiene un montón de respuesta de los componentes tal vez es más fácil usar el contexto?

Puedo usar @senornestor ‘s solución, pero para ser totalmente correcta, retire el detector de eventos así:

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

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

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

De lo contrario, usted ‘ll obtener la advertencia:

Advertencia: forceUpdate(…): sólo Puede actualizar montada o montaje
componente. Esto generalmente significa que usted llama forceUpdate() en una desmontado
componente. Este es un no-op. Por favor, compruebe el código de la XXX
componente.

Me iba a saltar todas las respuestas anteriores y comenzar a utilizar el react-dimensions Mayor Componente de Orden.

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

Acaba de agregar un simple import y una llamada a una función, y se puede acceder a this.props.containerWidth y this.props.containerHeight en el componente.

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

Este código es el uso de la nueva Reaccionar contexto de la API:

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

Entonces usted puede utilizar siempre que lo desee en su código como este:

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

No necesariamente se debe a la fuerza de un re-procesamiento.

Esto podría no ayudar a OP, pero en mi caso sólo tuve que actualizar el width y height atributos en mi lienzo (que no se puede hacer con CSS).

Se parece a esto:

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

No estoy seguro si este es el mejor método, pero lo que funcionó para mí fue la primera creación de una Tienda, me llamó 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;

Entonces yo que la guarde en mis componentes, algo como esto:

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

FYI, estos archivos fueron parcialmente tapizados.

Sé que esto ha sido contestado, pero sólo pensé en compartir mi solución como la respuesta, a pesar de que gran, ahora puede ser un poco anticuado.

    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 única diferencia real es que estoy eliminación de rebotes (sólo se ejecuta cada 200ms) la updateWindowDimensions en el evento de cambio de tamaño para aumentar el rendimiento un poco, PERO no eliminación de rebotes cuando se llama en ComponentDidMount.

Estaba encontrando el rebote hecho bastante lag al monte, a veces, si usted tiene una situación en la que es montaje a menudo.

A un menor de edad optimización, pero espero que ayude a alguien!

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

Sólo necesita definir el evento resize de la función.

A continuación, actualizar los renderizadores tamaño ( lienzo ), asignar una nueva relación de aspecto de la cámara.

Desmontar y remouting es un loco de la solución, en mi opinión….

a continuación es el montaje si es necesario.

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

Sólo para mejorar en @senornestor la solución para usar forceUpdate y @gkri la solución para la eliminación de la resize detector de eventos en el componente de desmontar:

1. no te olvides de acelerador (o de rebote) la llamada para cambiar el tamaño de
2. asegúrese de bind(this) en el constructor

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

Otro método es usar un «dummy» del estado en lugar 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>
)
}
}

Tuvieron que obligar a ‘esta’ en el constructor para que funcione con la Clase de sintaxis

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

Gracias a todos por las respuestas. Aquí está mi Reaccionan + Recomponer. Se trata de una Alta Función de Orden que incluye el windowHeight y windowWidth propiedades para el componente.

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 es una HOC para ello, mientras que todavía mantiene un buen rendimiento.

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

Quería compartir este genial cosa que me acabo de encontrar usando 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 devolverá true o false si la ventana es mayor o menor que la especificada ancho máximo valor, esto significa que no hay necesidad de limitar el oyente, como el matchMedia sólo se desencadena una vez, cuando el booleano cambios.

Mi código puede ser fácilmente ajustado para incluir useState para guardar el booleano matchMedia devuelve, y lo utilizan para representar condicionalmente un componente, el fuego de la acción, etc.

Por esta razón mejor es usar este tipo de datos de CSS o JSON datos de archivo y, a continuación, con los datos de configuración del nuevo estado con este.estado({width: «algo de valor»,altura:»algo de valor» }); o escribir código que utilice los datos de la anchura de los datos de la pantalla en auto de trabajo si desea sensible mostrar imágenes