react组件中监听window的resize事件，实现响应式

所谓响应式，就是页面在不刷新的情况下，拖到不同尺寸的显示器上，或者鼠标放大、缩小浏览器时（当浏览器窗口尺寸发生变化时），页面中的内容会自动适配窗体大小。

目前很多js库都具有响应式功能，例如：bootstrap下的各种库。

在html页面中，我们可以通过监听window的resize事件来完成各个组件的大小设置。同样，react组件代码中，我们也可以通过同样的方式来实现，例如：

export default class HtmlPage extends Component {
    handleResize = e => {
        // 根据宽度不同，进行你所要进行的操作
        //document.documentElement.clientHeight是页面带有滚动条的高度
        //e.target.innerWidth是浏览器窗口的宽度
        if( e.target.innerWidth<1600){
             document.getElementById("indexImgId").style.display="none"
        }else{
            document.getElementById("indexImgId").style.display="block"
        }
    }
    componentDidMount(){
        //监听窗口大小改变
        window.addEventListener('resize', this.handleResize.bind(this));
    }
    //移除监听器，防止多个组件之间导致this的指向紊乱
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize.bind(this));
    }
    render() {
        return (
            <div>
            
            </div>
        )
    }
}