我有一些教程中的代码来在网页上创建视差效果。教程中没有使用react，但我在我的项目中使用了。代码如下所示：

const parallax_el = document.querySelectorAll(
".parallax"
  ) as NodeListOf<HTMLElement>;
let xValue = 0,
yValue = 0;
window.addEventListener("mousemove", (e) => {
xValue = e.clientX - window.innerWidth / 2;
yValue = e.clientY - window.innerHeight / 2;
  });
parallax_el.forEach(
    (item) =>
      (item.style.transform = \translateX(${-xValue}px) translateY(${-yValue}px)`) );`

正如标题所暗示的那样，className中具有视差的图像不会更新它们的位置，除非我在vscode中按Ctrl+S，然后它会根据我的光标在浏览器窗口中的位置进行对齐。
起初我以为react.useEffect是我试图更新DOM时所缺少的，但在更新代码时：

React.useEffect(() => {
const parallax_el = document.querySelectorAll(
".parallax"
    ) as NodeListOf<HTMLElement>;
let xValue = 0,
yValue = 0;
window.addEventListener("mousemove", (e) => {
xValue = e.clientX - window.innerWidth / 2;
yValue = e.clientY - window.innerHeight / 2;
    });
return () => {
parallax_el.forEach(
        (item) =>
          (item.style.transform = \translateX(${-xValue}px) translateY(${-yValue}px)`)     );   }; }, []);`

同样的行为正在发生。在控制台中没有错误，我尝试控制台记录xValue和yValue，如果console.log在转换之前，它会发生，但如果我把它放在转换之后，它就会停止显示，我不知道是什么原因导致JavaScript方面的事情。