React 同构渲染 - 处理 window resize 事件

Question

我想根据浏览器的当前大小设置组件的状态 window。已经使用服务端渲染（React+Redux）。我正在考虑使用 Redux 商店作为胶水 - 只是为了在调整大小时更新商店。有没有不涉及 Redux 的 other/better 解决方案。谢谢

class FocalImage extends Component {

  // won't work - the backend rendering is used
  // componentDidMount() {
  //  window.addEventListener(...);
  //}

  //componentWillUnmount() {
  //  window.removeEventListener('resize' ....);
  //}

  onresize(e) {
    //
  }

  render() {
    const {src, className, nativeWidth, nativeHeight} = this.props;
    return (
      <div className={cn(className, s.focalImage)}>
        <div className={s.imageWrapper}>
          <img src={src} className={_compare_ratios_ ? s.tall : s.wide}/>
        </div>
      </div>
    );
  }
}

Answer 1

我有一个可以向其传递函数的调整大小辅助组件，它看起来像这样：

class ResizeHelper extends React.Component {

    static propTypes = {
        onWindowResize: PropTypes.func,
    };

    constructor() {
        super();
        this.handleResize = this.handleResize.bind(this);
    }

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

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

    handleResize(event) {
        if ('function' === typeof this.props.onWindowResize) {
            // we want this to fire immediately the first time but wait to fire again
            // that way when you hit a break it happens fast and only lags if you hit another break immediately
            if (!this.resizeTimer) {
                this.props.onWindowResize(event);
                this.resizeTimer = setTimeout(() => {
                    this.resizeTimer = false;
                }, 250); // this debounce rate could be passed as a prop
            }
        }
    }

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

然后任何需要调整大小的组件都可以像这样使用它：

<ResizeHelper onWindowResize={this.handleResize} />

您可能还需要在 componentDidMount 上调用一次传递的函数来设置 UI。由于 componentDidMount 和 componentWillUnmount 永远不会在服务器上被调用，所以这在我的同构应用程序中完美运行。

Answer 2

我的解决方案是在最顶层处理调整大小事件并将其传递到我的最顶层组件，您可以查看完整代码 here，但要点是：

let prevBrowserWidth

//re-renders only if container size changed, good place to debounce
let renderApp = function() {
  const browserWidth = window.document.body.offsetWidth

  //saves re-render if nothing changed
  if (browserWidth === prevBrowserWidth) {
    return
  }

  prevBrowserWidth = browserWidth

  render(<App browserWidth={browserWidth} />, document.getElementById('root'))
}

//subscribing to resize event
window.addEventListener('resize', renderApp)

它显然可以在没有 Redux 的情况下工作（虽然我仍然使用 Redux）并且我认为使用 Redux 也一样容易。与使用组件的解决方案相比，此解决方案的优势在于您的 React 组件完全不知道这一点，并与浏览器宽度一起使用，就像传递的任何其他道具一样。所以它是一个处理副作用的地方。缺点是它只给你一个属性而不是事件本身，所以你不能真正依赖它来触发渲染函数之外的东西。

除此之外，您还可以使用类似以下方法解决服务器端呈现问题：

import ExecutionEnvironment from 'exenv'

  //...
  
componentWillMount() {
    if (ExecutionEnvironment.canUseDOM) {
      window.addEventListener(...);
    }
  }

React 同构渲染 - 处理 window resize 事件

React Isomorphic Rendering - handle window resize event

reactjs

isomorphic-javascript