2020年更新。对于认真关注性能的React开发人员。

上述解决方案确实有效，但只要窗口大小改变一个像素，就会重新渲染组件。

这通常会导致性能问题，所以我写了useWindowDimension钩子，在短时间内反弹调整大小事件。如100毫秒

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

export function useWindowDimension() {
  const [dimension, setDimension] = useState([
    window.innerWidth,
    window.innerHeight,
  ]);
  useEffect(() => {
    const debouncedResizeHandler = debounce(() => {
      console.log('***** debounced resize'); // See the cool difference in console
      setDimension([window.innerWidth, window.innerHeight]);
    }, 100); // 100ms
    window.addEventListener('resize', debouncedResizeHandler);
    return () => window.removeEventListener('resize', debouncedResizeHandler);
  }, []); // Note this empty array. this effect should run only on mount and unmount
  return dimension;
}

function debounce(fn, ms) {
  let timer;
  return _ => {
    clearTimeout(timer);
    timer = setTimeout(_ => {
      timer = null;
      fn.apply(this, arguments);
    }, ms);
  };
}

像这样使用它。

function YourComponent() {
  const [width, height] = useWindowDimension();
  return <>Window width: {width}, Window height: {height}</>;
}

你不一定需要强制重新渲染。

这可能对OP没有帮助，但在我的情况下，我只需要更新画布上的宽度和高度属性(这是CSS无法做到的)。

它是这样的:

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

由于这个原因，更好的是如果你使用这个数据来自CSS或JSON文件的数据，然后用这个数据设置新的状态。状态({width: "some value"，height:"some value"});或者写代码谁使用宽屏幕数据的数据在自己的工作，如果你希望响应显示图像

这个厨房里有很多厨师，但不管怎样我都要把我的帽子扔进去。这些都没有使用requestAnimationFrame，我认为这是性能最好的。

下面是一个使用React钩子和requestAnimationFrame的例子。这也使用纯js，没有任何库，如lodash(由于捆绑包的大小，我尽量避免使用)。

import { useState, useEffect, useCallback } from 'react';

const getSize = () => {
  return { 
    width: window.innerWidth,
    height: window.innerHeight,
  };
};
 
export function useResize() {
 
  const [size, setSize] = useState(getSize());
 
  const handleResize = useCallback(() => {
    let ticking = false;
    if (!ticking) {
      window.requestAnimationFrame(() => {
        setSize(getSize());
        ticking = false;
      });
      ticking = true;
    } 
  }, []);

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

下面是它使用的要点:Img。tsx和useResize。或者，你可以在我的回购中看到更多的上下文。

一些关于为什么你应该这样做而不是debouning你的函数的参考资料:

一个相关的github公关与良好的解释 中等，但在一个迷因墙后面 一个深入的stackoverflow回答

谢谢你们来听我的Ted演讲。

我将跳过上述所有答案，并开始使用反应维度的高阶组件。

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

只需添加一个简单的导入和一个函数调用，就可以在组件中访问this.props.containerWidth和this.props.containerHeight。

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

https://github.com/renatorib/react-sizes是一个HOC，可以做到这一点，同时仍然保持良好的性能。

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