如何使用React的useState持续存储鼠标移动位置数组并避免重置

你遇到的核心问题是局部变量无法跨组件渲染保留数据：每次组件重新渲染（比如状态更新、父组件传参变化），let positionArray = []都会被重新声明成一个空数组，之前收集的鼠标位置自然就丢失了。要持续存储这些位置，得用React的状态来管理，而不是普通的局部变量。

正确的基础实现方式 #

把存储位置的数组改成useState状态，并且用函数式更新来确保每次都基于最新的状态添加新位置：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  // 初始化为空数组，而不是空字符串
  const [route, setRoute] = useState([]);

  const getMousePosition = (e) => {
    const position = { x: e.offsetX, y: e.offsetY };
    // 用函数式更新，prevRoute是当前最新的状态数组
    setRoute(prevRoute => [...prevRoute, position]);
  };

  useEffect(() => {
    window.addEventListener('mousemove', getMousePosition);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('mousemove', getMousePosition);
  }, []); // 空依赖项，只在组件挂载/卸载时执行一次

  return (
    <div>
      {/* 可以在这里展示收集到的位置数量或其他信息 */}
      <p>已追踪到 {route.length} 个鼠标位置</p>
    </div>
  );
};

export default YourComponent;

为什么这样有效？ #

1. useState的状态会在组件多次渲染之间被React保留，不会像局部变量那样每次渲染都重置。
2. 函数式更新prevRoute => [...prevRoute, position]能避免闭包陷阱：因为React会把当前最新的状态传给prevRoute，确保每次添加新位置时都是基于最新的数组，不会拿到旧的状态值。

优化：减少频繁更新的性能消耗 #

鼠标移动会触发大量mousemove事件，如果直接每次都更新状态，可能导致组件频繁渲染影响性能。可以用节流函数限制更新频率，比如每100ms更新一次：

import { useState, useEffect, useCallback } from 'react';
// 可以用lodash的throttle，或者自己实现简单的节流
import throttle from 'lodash.throttle';

const MouseTracker = () => {
  const [route, setRoute] = useState([]);

  // 用useCallback包裹节流后的函数，保证引用稳定
  const getMousePosition = useCallback(throttle((e) => {
    const position = { x: e.offsetX, y: e.offsetY };
    setRoute(prevRoute => [...prevRoute, position]);
  }, 100), []); // 每100ms更新一次

  useEffect(() => {
    window.addEventListener('mousemove', getMousePosition);
    return () => {
      getMousePosition.cancel(); // 清理节流函数的定时器
      window.removeEventListener('mousemove', getMousePosition);
    };
  }, [getMousePosition]); // 依赖getMousePosition，确保引用变化时重新绑定

  return (
    <div>
      <p>已追踪到 {route.length} 个鼠标位置</p>
    </div>
  );
};

export default MouseTracker;

额外说明 #

如果只是需要存储数据但不需要触发组件渲染（比如不需要实时展示位置数量），也可以用useRef来存储数组，不过这种情况比较少，因为你大概率需要基于这些位置做UI展示，所以useState更合适。

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