使用React重新调整浏览器的渲染视图

Question

调整浏览器窗口大小时，如何让React重新渲染视图？背景我有一些块要在页面上单独布局，但是我还希望它们在浏览器窗口更改时进行更新。最终结果将类似于Ben Holland的 Pinterest布局，但使用React编写的不仅是jQuery。我还有一段路要走。码这是我的应用程序：var MyApp = React.createClass({  //does the http get from the server  loadBlocksFromServer: function() {    $.ajax({      url: this.props.url,      dataType: 'json',      mimeType: 'textPlain',      success: function(data) {        this.setState({data: data.events});      }.bind(this)    });  },  getInitialState: function() {    return {data: []};  },  componentWillMount: function() {    this.loadBlocksFromServer();  },      render: function() {    return (        <div>      <Blocks data={this.state.data}/>      </div>    );  }});React.renderComponent(  <MyApp url="url_here"/>,  document.getElementById('view'))然后，我有了Block组件（相当于Pin上面的Pinterest示例中的）：var Block = React.createClass({  render: function() {    return (        <div class="dp-block" style={{left: this.props.top, top: this.props.left}}>        <h2>{this.props.title}</h2>        <p>{this.props.children}</p>        </div>    );  }});和的清单/集合Blocks：var Blocks = React.createClass({  render: function() {    //I've temporarily got code that assigns a random position    //See inside the function below...    var blockNodes = this.props.data.map(function (block) {         //temporary random position      var topOffset = Math.random() * $(window).width() + 'px';       var leftOffset = Math.random() * $(window).height() + 'px';       return <Block order={block.id} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;    });    return (        <div>{blockNodes}</div>    );  }});题我应该添加jQuery的窗口调整大小吗？如果是这样，在哪里？$( window ).resize(function() {  // re-render the component});有没有更“反应”的方式来做到这一点？

Answer 1

使用React Hooks：

您可以定义一个自定义的Hook来监听window resize事件，如下所示：

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

}

这样做的好处是逻辑被封装，您可以在要使用窗口大小的任何位置使用此Hook。

使用React类：

您可以在componentDidMount中进行监听，类似于该组件，它仅显示窗口尺寸（如<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);

  }

}

Answer 2

我只想根据此答案提供她的解决方案的修改版本，而无需jQuery。

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

    }

});