Question

浏览器：chrome 62

反应版本： 16

为了实验目的，我使用requestAnimationFrame构建了秒表组件。

Blog post of css-trick says requestAnimationFrame的美化是当标签处于非活动状态时停止。

但是，移动标签后，我的组件状态仍然会更新。

我错过了什么？见代码：

import React from 'react';
class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            passedTime: 0,
            startTime: new Date()
        };
        this.repeatOften = this.repeatOften.bind(this)
        requestAnimationFrame(this.repeatOften);
    }
    repeatOften() {
        const currentTime = new Date().getTime()
        const passedTime = (currentTime - this.state.startTime) / 1000
        this.setState({
            passedTime
        })
        requestAnimationFrame(this.repeatOften)
    }
    render() {
        return (
            <div>
                <h1>{this.state.passedTime}!</h1>
            </div>
        );
    }
}

export default Clock

Answer 1

我不认为requestAnimationFrame的行为在标签没有聚焦时是普遍定义的，因浏览器而异，所以我不会太依赖它。如果您希望精确控制应用在重点关注时应用的功能，那么您应该倾听window.onblur和window.onfocus事件。

requestAnimationFrame on react - 当选项卡处于非活动状态时不会停止状态更新

1 个答案: