我知道这个问题已经有人回答了，但我只是想把我的解决方案作为最重要的答案分享给大家，虽然很好，但现在可能有点过时了。

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

唯一的区别是我在resize事件上deboundation(只运行每200ms一次)updateWindowDimensions来增加一点性能，但不是在ComponentDidMount上调用时deboundation它。

我发现，如果你经常安装它，那么反弹有时会使它的安装相当滞后。

只是一个小的优化，但希望它能帮助到别人!

import React, {useState} from 'react'; type EventListener = () => void let eventListener: EventListener | undefined; function setEventListener(updateSize: (size: number[]) => void){ if(eventListener){ window.removeEventListener('resize',eventListener); } eventListener = () => updateSize([window.innerWidth, window.innerHeight]); return eventListener as EventListener; } function setResizer(updateSize: (size: number[]) => void) { window.addEventListener( 'resize', setEventListener(updateSize) ); } function useWindowSizeTableColumns() { const [size, setSize] = useState([ window.innerWidth || 0, window.innerHeight || 0 ]); setResizer(updateSize); return size; function updateSize(s: number[]) { if(size.some((v, i) => v !== s[i])){ setSize(s); } } } export default useWindowSize;

对于那些寻求Typescript支持的人，我根据@Lead Developer的回答写了下面的钩子:

import { useState, useEffect } from 'react';


export const debounce = <A extends unknown[]>(callback: (...args: A) => unknown, msDelay: number) => {
    let timer: NodeJS.Timeout | undefined;

    return (...args: A) => {
        clearTimeout(timer);

        timer = setTimeout(() => {
            timer = undefined;
            callback(...args);
        }, msDelay);
    };
};

export const useWindowDimension = (msDelay = 100) => {
    const [dimension, setDimension] = useState({
        width: window.innerWidth,
        height: window.innerHeight,
    });

    useEffect(() => {
        const resizeHandler = () => {
            setDimension({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };

        const handler = msDelay <= 0 ? resizeHandler : debounce(resizeHandler, msDelay);

        window.addEventListener('resize', handler);

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

    return dimension;
};

export type Dimension = ReturnType<typeof useWindowDimension>;

很明显，它的好处是Typescript支持，还有一个选项可以控制延迟时间(以毫秒为单位)，默认为100ms。如果延迟时间为0或更少，它将不会反弹处理程序。 另一个区别是钩子返回一个Dimension类型的对象，即:

type Dimension = {
    width: number;
    height: number;
}

这样，每个人都清楚钩子实际返回的是什么。

在index.js:

function render() {
  ReactDOM.render(<App />, document.getElementById('root'));
}

render();

window.addEventListener('resize', render);

重新渲染要求重新计算所有依赖于React本身无法检测到的变量的东西，比如window。innerWidth/innerHeight, localStorage等，同时保持应用程序状态不变。

如果需要在其他情况下重新渲染，也可以导出此render()函数并在其他地方使用。

虽然我不确定这对性能的影响(因为它可能会重新渲染所有内容或只是改变了什么)，但对我来说，调整大小时它似乎足够快。

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

这可能对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;
`

这段代码使用了新的React上下文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>;
    }
  }

然后你可以在你的代码中使用它，像这样:

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