Javascript 在React中存储页偏移量值的最佳方法

存储和显示通过滚动事件更改的页面偏移值的最佳方式/推荐模式是什么

将值存储在

useState

函数应用程序（）{
const[posY，setPosY]=useState（0）；
useffect（（）=>{
常量handleScroll=（e）=>setPosY（window.pageYOffset）；
window.addEventListener（“滚动”，handleScroll）；
return（）=>window.removeEventListener（“滚动”，handleScroll）；
});
返回{posY}；
}

将值存储在

useRef

函数应用程序（）{
const posYRef=useRef（0）；
useffect（（）=>{
const handleScroll=（e）=>{posYRef.current=window.pageYOffset}；
window.addEventListener（“滚动”，handleScroll）；
return（）=>window.removeEventListener（“滚动”，handleScroll）；
});
返回{posYRef.current}；
}

直接访问和写入innerHTML（嗯……我是认真的）

函数应用程序（）{
useffect（（）=>{
常量handleScroll=（e）=>{
document.querySelector（“div”）.innerHTML=window.pageYOffset；
);
window.addEventListener（“滚动”，handleScroll）；
return（）=>window.removeEventListener（“滚动”，handleScroll）；
});
返回{0}；
}

---

我知道#1通常被认为是正确的执行，但我想知道#2或#3在这种情况下是否一定不好。我们可以实际执行#2或#3，因为它们在这种情况下工作吗？

你应该使用状态来执行此操作，因为你想在滚动的基础上显示动画，你应该更新状态，并且状态会发生变化uld触发器在react上重新呈现。

---

虽然设置innerHTML不会进行重新渲染。

经过一段时间的额外研究后，我得出结论，尽管#1绝对是标准/推荐的方式，但上述三种方式都可以在特殊情况下工作

虽然我同意在大多数情况下应该使用

state

来获得React呈现的正确更新，但如果页面在加载后从未更新，那么#2或#3也可以工作。尤其是当不支持React的第三方库在操作DOM时，它可以工作，并且您需要使用React更新它们。这是React反模式，可能会导致可能会造成维护地狱，所以你应该知道你在做2或3时在做什么

关于性能，理论上，#2或#3应该更快，因为它们都跳过虚拟DOM更新。但是，在正常情况下，在操作几百个DOM元素时没有什么区别；这意味着在大多数情况下，使用#2或#3无法证明渲染性能更好