在index.js:

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

render();

window.addEventListener('resize', render);

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

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

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

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

只是为了改进@senornestor使用forceUpdate的解决方案和@gkri在组件卸载时删除resize事件监听器的解决方案:

不要忘记抑制(或撤消)调整大小的要求 确保在构造函数中绑定(this)

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

另一种方法是使用一个“dummy”状态来代替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>
    )
  }
}

这个厨房里有很多厨师，但不管怎样我都要把我的帽子扔进去。这些都没有使用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演讲。

Edit 2018:现在React拥有对上下文的一流支持

我将尝试给出一个一般的答案，针对这个特定的问题，但也针对一个更普遍的问题。

如果您不关心副作用库，您可以简单地使用Packery之类的东西

如果你使用Flux，你可以创建一个包含窗口属性的存储，这样你就可以保持一个纯粹的呈现函数，而不必每次都查询窗口对象。

在其他情况下，你想建立一个响应式网站，但你更喜欢React内联样式的媒体查询，或者希望HTML/JS行为根据窗口宽度改变，请继续阅读:

什么是React上下文?为什么我要谈论它

React上下文不在公共API中，允许将属性传递给整个组件层次结构。

React上下文特别有用，它可以传递给你整个应用程序中永远不会改变的东西(许多Flux框架通过mixin使用它)。你可以用它来存储应用程序业务不变量(比如连接的userId，这样它就可以在任何地方使用)。

但它也可以用来存储可以改变的东西。问题是，当上下文改变时，所有使用它的组件都应该重新呈现，这并不容易做到，最好的解决方案通常是卸载/重新挂载整个应用程序与新的上下文。记住forceUpdate不是递归的。

因此，正如您所理解的，上下文是实用的，但是当它改变时，会对性能产生影响，所以它不应该经常改变。

把什么放在上下文中

不变量:比如连接的userId, sessionToken，等等… 不经常改变的东西

以下是一些不会经常改变的东西:

当前用户语言:

它不会经常改变，当它改变时，整个应用程序都被翻译了，我们必须重新渲染所有内容:这是热语言变化的一个非常好的用例

窗口属性

宽度和高度不会经常改变，但当我们这样做时，我们的布局和行为可能不得不适应。对于布局，有时很容易使用CSS mediaqueries进行自定义，但有时不是，需要不同的HTML结构。对于行为，你必须用Javascript来处理。

你不希望在每个调整大小事件上重新渲染所有内容，所以你必须撤消调整大小事件。

我对你的问题的理解是，你想知道根据屏幕宽度显示多少项。因此，您必须首先定义响应式断点，并枚举可以拥有的不同布局类型的数量。

例如:

布局“1col”，宽度<= 600 布局为“2col”，用于600 < width < 1000 布局为“3col”，用于1000 <= width

在调整大小事件(debpublished)上，您可以通过查询窗口对象轻松获得当前布局类型。

然后你可以比较布局类型与以前的布局类型，如果它已经改变了，重新呈现应用程序与一个新的上下文:这允许避免重新呈现应用程序在用户有触发调整大小事件，但实际上布局类型没有改变，所以你只在需要时重新呈现。

一旦你有了它，你就可以简单地在你的应用程序中使用布局类型(通过上下文访问)，这样你就可以自定义HTML、行为、CSS类……你知道你的布局类型在React渲染函数中，所以这意味着你可以通过使用内联样式安全地编写响应式网站，而根本不需要介质查询。

如果你使用Flux，你可以使用一个商店而不是React上下文，但如果你的应用程序有很多响应组件，也许使用上下文更简单?

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

只需要定义调整大小事件函数。

然后更新渲染器的大小(画布)，为相机分配一个新的纵横比。

卸载和重挂在我看来是一个疯狂的解决方案....

下面是底座，如果需要的话。

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