reactjs - 检查浏览器选项卡是否在ReactJS中处于焦点

我在ReactJS中有一个网站。每当我的标签页处于焦点或隐藏状态时，我都希望获得回调。我遇到了页面可见性API，但是我无法弄清楚如何在ReactJS中使用它。

我应该在哪个生命周期方法中注册回调？

最佳答案

这应该工作:

componentDidMount() {
    window.addEventListener("focus", this.onFocus)
}

componentWillUnmount() {
    window.removeEventListener("focus", this.onFocus)
}

onFocus = () => {
    //
}

编辑:“模糊”同样适用，并且在选项卡变为隐藏状态时也应适用。
检查@Assaf的答案是否有钩子(Hook)。