React中视差元素需VSCode热更新才生效的JavaScript问题排查

核心错误点 #

你写的代码存在两个关键问题：

1. 初始代码中，parallax_el.forEach(...)仅在组件首次渲染（或热更新）时执行一次，后续鼠标移动虽然更新了xValue和yValue，但没有触发DOM样式的重新计算，所以只有热更新时才会看到位置变化。
2. 修改后的useEffect里，你把样式更新逻辑放在了effect的清理函数（return的部分），这个函数只会在组件卸载时执行一次，平时鼠标移动完全不会触发样式修改——这就是变换后打印无输出的原因，因为这段代码根本没运行过。

正确实现方式 #

下面两种写法都能解决问题，按需选择：

写法1：原生事件回调直接更新样式（贴近原教程逻辑）

React.useEffect(() => {
  const parallax_el = document.querySelectorAll(".parallax") as NodeListOf<HTMLElement>;

  const handleMouseMove = (e: MouseEvent) => {
    const xValue = e.clientX - window.innerWidth / 2;
    const yValue = e.clientY - window.innerHeight / 2;
    // 每次鼠标移动时实时更新所有视差元素的位置
    parallax_el.forEach(item => {
      // 加0.1系数是为了让视差效果更自然，避免移动幅度过大
      item.style.transform = `translateX(${-xValue * 0.1}px) translateY(${-yValue * 0.1}px)`;
    });
  };

  window.addEventListener("mousemove", handleMouseMove);
  // 组件卸载时移除监听，防止内存泄漏
  return () => window.removeEventListener("mousemove", handleMouseMove);
}, []);

写法2：用React状态管理坐标（更符合React数据流）

如果后续需要基于鼠标坐标做其他UI逻辑，这种方式更灵活：

const [mouseOffset, setMouseOffset] = React.useState({ x: 0, y: 0 });

// 监听鼠标移动，更新状态
React.useEffect(() => {
  const handleMouseMove = (e: MouseEvent) => {
    setMouseOffset({
      x: e.clientX - window.innerWidth / 2,
      y: e.clientY - window.innerHeight / 2
    });
  };

  window.addEventListener("mousemove", handleMouseMove);
  return () => window.removeEventListener("mousemove", handleMouseMove);
}, []);

// 监听状态变化，更新DOM样式
React.useEffect(() => {
  const parallax_el = document.querySelectorAll(".parallax") as NodeListOf<HTMLElement>;
  parallax_el.forEach(item => {
    item.style.transform = `translateX(${-mouseOffset.x * 0.1}px) translateY(${-mouseOffset.y * 0.1}px)`;
  });
}, [mouseOffset]);

额外建议 #

如果你的视差元素是组件内部渲染的，建议用useRef获取元素，比querySelector更安全（避免意外选中其他组件的元素）：

const parallaxRefs = React.useRef<HTMLElement[]>([]);

// 渲染元素时绑定ref
// <div className="parallax" ref={el => el && parallaxRefs.current.push(el)} />

内容的提问来源于stack exchange，提问作者SK99