React 监听页面是否切出，避免多余请求

不知道你是否是跟我同样，遇到过下面这种状况：

页面须要定时发送请求，获取数据，并且这个请求是一个公共请求，应用中全部页面都会进行这样一个操做。因此假如用户打开五个页面，那五个页面都会发送请求，即使用户看不到其他的4个。这种多余的请求会加剧服务端的压力。

浏览器里在当前标签页切换时，会触发 visibilitychange 事件，咱们能够经过监听这个事件来解决咱们的问题。

class AgentList extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            list: []
        }
        this.refresher = this.createRefresher(this.getNotice, 30 * 1000);
    }
    
    componentDidMount() {
        window.setTimeout(() => {
          this.getNotice();
        }, 6000);

        document.addEventListener('visibilitychange', this.handleVisibilitychange);
    }
    
    componentWillUnmount() {
        this.refresher.stop();
        document.removeEventListener('visibilitychange', this.handleVisibilitychange);
    }
    
    getNotice = async () => {
        if (!document.hidden) {
          this.refresher.start();
        }
    
        const { data } = await API.getNotice();
        if (data && data.status === '1') {
            const { list } = data;
            this.setState({ popupList });
        }
    }
    
    handleVisibilitychange = () => {
        if (document.hidden) {
            this.refresher.stop();
        } else {
            window.setTimeout(() => {
                this.getNotice();
            }, 6000);
        }
    });
    
    createRefresher = (f, delay) => {
        let timer = null;
        const start = () => {
            if (timer === undefined) {
                timer = setInterval(f, delay);
            } else {
                clearInterval(timer);
                timer = undefined;
                timer = setInterval(f, delay);
            }
        };

        const stop = () => {
            if (timer) {
                clearInterval(timer);
                timer = undefined;
            }
        };

        return { start, stop };
    }
    
    render () {
        const { list } = this.state;
        return (
            <ul>
                list.map(item => <li>item</li>)
            </ul>
        )
    }
}
复制代码

页面中不是必要的请求，能够延迟发送，尽可能减小页面进入时同时发送的请求：

window.setTimeout(() => {
    this.getNotice();
}, 6000);
复制代码

监听 visibilitychange 事件，当页面切出时，清除定时器；当页面切入时，从新发送请求，并在 getNotice() 当中判断若是页面在展现中，则开启定时器。

handleVisibilitychange = () => {
    if (document.hidden) {
        this.refresher.stop();
    } else {
        window.setTimeout(() => {
            this.getNotice();
        }, 6000);
    }
});
复制代码

在这记录下，若是有错误的地方，欢迎你们批评之争，哈哈哈哈