Html React.js-trigger"；“使用效果”；仅当页面处于活动状态时 TL；博士

“Vanilla JS app仅在用户在页面上处于活动状态时执行代码，而React组件则在组件加载到DOM中后立即执行代码（即使用户在页面上处于非活动状态时执行代码）。”

---

我正在制作一个React网站，并使用“CSS转换”创建一个SVG动画，该转换通过向元素添加一个类来触发。下面是反应代码

useEffect(() => {    
function startAnimation() {
    var wrapper = document.querySelector('svg#logo');
    wrapper.classList.add('active');
}
}, []);

我最初是在一个Vanilla JS项目中创建的（使用jQuery的

$（document）.ready（）

函数），然后将其转换为React组件。但是我注意到Vanilla JS应用程序中的转换只有在页面处于活动状态时才会启动，而React组件则在组件加载到DOM中后立即启动转换（即使用户在页面上不处于活动状态）

我知道这是因为我使用的是

useffect

hook，但是我们如何使用React获得与

$（document.ready（）

相同的行为呢

下面是Vanialla JS代码

$(document).ready(function () {
function logoDraw() {
  var wrapper = document.querySelector('svg#logo')
  wrapper.classList.add('active')
}

  setTimeout(logoDraw, 10)
});

---

更新：

• 基于另一个问题，我使用“焦点”事件侦听器仅在页面处于焦点时启动动画。但这样做之后，如果我重新加载页面并保持在同一页面中，转换就不会启动。它只有在我切换标签时才会启动
• 我发现一个声明“在第一次加载页面时，它已经有焦点，因此不会引发任何事件”

---

经过数小时的在线搜索，我终于在一篇名为“”的博客文章中找到了完美答案
它可以做两件事之一：
• 检测页面是否已处于活动状态，并立即执行代码（即使重新加载也有效）
• 等待选项卡变为活动状态并执行代码
该博客详细介绍了它的工作原理，赛斯·科克（该博客的所有者）也主持了一次会议

---

如果页面处于活动状态，我们可以使用“”，并根据需要使用“useEffect”挂钩对任何DOM元素进行更改
请在下面找到上述博客中工作代码的示例副本
函数getBrowservibilityProp（）{ if（typeof document.hidden！=“未定义”）{ //Opera 12.10和Firefox 18及更高版本支持 返回“visibilitychange” }else if（typeof document.msHidden！=“未定义”）{ 返回“msvisibilitychange” }else if（typeof document.webkitHidden！=“未定义”）{ 返回“webkitvisibilitychange” } } 函数getBrowserDocumentHiddenProp（）{ if（typeof document.hidden！=“未定义”）{ 返回“隐藏” }else if（typeof document.msHidden！=“未定义”）{ 返回“msHidden” }else if（typeof document.webkitHidden！=“未定义”）{ 返回“webkitHidden” } } 函数getIsDocumentHidden（）{ return！文档[getBrowserDocumentHiddenProp（）] } 函数usePageVisibility（）{ const[isVisible，setIsVisible]=React.useState（getIsDocumentHidden（）） const onVisibilityChange=（）=>setIsVisible（getIsDocumentHidden（）） React.useffect（（）=>{ 常量visibilityChange=GetBrowservibilityProp（） document.addEventListener（visibilityChange、onVisibilityChange、false） return（）=>{ document.removeEventListener（visibilityChange、onVisibilityChange） } }) 返回是可见的 } //以上代码使用页面可见性API //下面是一个简单的React代码 常量应用=（道具）=>{ const[counter，setCounter]=React.useState（0）； const isVisible=usePageVisibility（） React.useffect（（）=>{ 常量超时=设置超时（（）=>{ 如果（可见）{ 设置计数器（计数器+1）； } }, 3000); return（）=>{ clearTimeout（超时）； }; }); 返回( 仅当页面处于活动状态时，以下数字才会每3秒更新一次
{计数器} ); }; render（，document.getElementById（“根”））

#输出{
字号：xx大号
}