TL; 博士
“ Vanilla-JS 应用程序仅在用户在页面上处于活动状态时才执行代码,而 React 组件会在组件加载到 DOM 中后立即执行代码(即使用户在页面上未处于活动状态) ”
我正在一个 React 网站上工作,并使用“CSS Transitions”创建一个 SVG 动画,该动画是通过向元素添加一个类来触发的。下面是react代码
useEffect(() => {
function startAnimation() {
var wrapper = document.querySelector('svg#logo');
wrapper.classList.add('active');
}
}, []);
我最初在 Vanilla-JS 项目中创建了它(使用 jQuery 的$(document).ready()
函数),然后将其转换为 React 组件。但是我注意到 Vanilla-JS 应用程序中的转换仅在页面处于活动状态时才会启动,而 React 组件会在组件加载到 DOM 中后立即启动转换(即使用户在页面上未处于活动状态)。
我知道这是因为我使用了useEffect
钩子,但是我们如何获得与$(document).ready()
使用 React相同的行为?
下面是 Vanialla-JS 代码
$(document).ready(function () {
function logoDraw() {
var wrapper = document.querySelector('svg#logo')
wrapper.classList.add('active')
}
setTimeout(logoDraw, 10)
});