React类组件转函数组件失败，求正确转换方案

尝试代码中的错误点： #

• useState语法错误：useState(top: 0) 写法违规，useState接收初始值，直接传入0即可，无需键名
• useEffect缺少依赖数组：不传依赖数组会导致组件每次渲染都重复绑定/解绑事件，应传入空数组[]，让逻辑仅在组件挂载、卸载时各执行一次
• 事件处理函数定义错误：function handleMouseMove = (e) => {} 是非法语法，函数声明不能用=；且更新状态时需直接调用setTop/setLeft，而非不存在的setState
• 样式绑定错误：style中误用了状态更新函数setTop/setLeft，应使用状态变量top/left
• 函数位置问题：handleMouseMove定义在return之后，虽函数声明会提升，但建议放在useEffect之前，规避潜在作用域问题

正确的函数组件代码： #

function NeonCursor(props) {
  // 初始化状态，直接传入初始数值
  const [top, setTop] = React.useState(0);
  const [left, setLeft] = React.useState(0);

  // 定义鼠标移动事件处理函数
  const handleMouseMove = (e) => {
    setTop(e.pageY);
    setLeft(e.pageX);
  };

  // useEffect传入空数组，模拟componentDidMount和componentWillUnmount
  React.useEffect(() => {
    document.addEventListener('mousemove', handleMouseMove);
    document.documentElement.classList.add('no-cursor');

    // 清理函数，对应componentWillUnmount
    return () => {
      document.documentElement.classList.remove('no-cursor');
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, []); // 空依赖数组确保只执行一次

  return (
    <img
      src="https://code.s3.yandex.net/web-code/react/cursor.svg"
      width={30}
      style={{
        position: 'absolute',
        top: top,
        left: left,
        pointerEvents: 'none',
      }}
    />
  );
}

补充优化说明： #

若担心handleMouseMove的引用变化（虽空依赖数组不会触发重复执行），可使用useCallback包裹事件处理函数，确保引用稳定：

const handleMouseMove = React.useCallback((e) => {
  setTop(e.pageY);
  setLeft(e.pageX);
}, []);

这样即使组件重新渲染，handleMouseMove的引用也不会改变，避免不必要的事件解绑与重新绑定。

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