后端开发教程 - Java、Spring Boot 实战 - msg200.com
利用 React 的页面可见性 API
网络是一个强大的平台，它所能提供的远超您的想象。许多 API 丰富了人们的网络体验，让开发者能够创建出以趣味盎然的方式进行互动的网站。
页面可见性 API 简单易用，但却常常被忽视。它是一款实用的工具，可以用来省电、节省流量或检测用户的参与度。让我们来看看这个 API 的功能，以及为什么你应该在你的项目中使用它。
它是什么？
检测浏览器选项卡何时变为活动/非活动状态。
就是这样。简单来说，当使用带有多个标签页的浏览器时，API 会检测标签页是否处于活动状态。当用户切换标签页时，Page Visibility API 会触发一个我们可以监听的 JavaScript 事件。当用户切换标签页时，我们会收到另一个事件，告知我们该标签页再次处于活动状态。
如果很难想象，请看一下演示。
它为什么有用？
您想知道选项卡处于活动状态还是非活动状态的原因可能不是很明显，但有一些常见情况您应该考虑。
节省电力
正在播放视频，可能是次要的背景视频。您可以在用户切换标签页时暂停视频，并在他们返回时继续播放。轮播也可以实现这一点。
保存数据
您有一个仪表板，它每隔几秒就会向 API 发出请求以保持更新。为什么用户不在看它的时候它要更新呢？您可以通过降低轮询频率或完全停止轮询，直到该选项卡再次处于活动状态，来节省用户的数据。
我如何使用它？
设置了自定义的 React hook 以使其更易于使用。
辅助方法
我们创建了一些辅助方法来抽象浏览器差异。事件处理程序和文档上的属性因浏览器而异，因此getBrowserVisibilityProp用于getBrowserDocumentHiddenProp确保我们添加了正确的监听器并检查了正确的属性。
export function getBrowserVisibilityProp() {
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
return "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
return "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
return "webkitvisibilitychange";
}
}
export function getBrowserDocumentHiddenProp() {
if (typeof document.hidden !== "undefined") {
return "hidden";
} else if (typeof document.msHidden !== "undefined") {
return "msHidden";
} else if (typeof document.webkitHidden !== "undefined") {
return "webkitHidden";
}
}
export function getIsDocumentHidden() {
return !document[getBrowserDocumentHiddenProp()];
}
钩子本身
这个钩子非常简单，我们监听可见性变化事件，并在返回之前将结果存储在状态中。注意，useEffect钩子的返回值会清理监听器。
export function usePageVisibility() {
const [isVisible, setIsVisible] = React.useState(getIsDocumentHidden());
const onVisibilityChange = () => setIsVisible(getIsDocumentHidden());
React.useEffect(() => {
const visibilityChange = getBrowserVisibilityProp();
window.addEventListener(visibilityChange, onVisibilityChange, false);
return () => {
window.removeEventListener(visibilityChange, onVisibilityChange);
};
}, []);
return isVisible;
}
使用钩子
一旦设置了钩子，使用它就很容易了。
const isVisible = usePageVisibility();
您的组件可以利用可见性状态，每当可见性状态发生变化时，isVisible变量也会随之变化。使用它来暂停动画、视频和轮播，或暂停获取数据，直到标签页再次处于活动状态。可能性很多，不妨一试。