React迁移交互式工作区：拖拽失效及DOM操作差异咨询

下面是实现拖拽空白区域移动容器元素的React组件，核心是用useRef获取真实DOM节点，结合useState维护容器位置，通过原生事件监听实现拖拽逻辑：

import { useState, useRef, useEffect } from 'react';

const DraggableWorkspace = () => {
  // 存储容器的偏移量
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // 存储拖拽起始点与容器当前位置的差值
  const dragOffsetRef = useRef({ x: 0, y: 0 });
  // 获取容器DOM节点
  const containerRef = useRef(null);

  const handleMouseDown = (e) => {
    // 仅在空白区域触发（判断目标是容器本身）
    if (e.target === containerRef.current) {
      // 计算鼠标点击位置与容器左上角的差值
      dragOffsetRef.current = {
        x: e.clientX - position.x,
        y: e.clientY - position.y
      };
      // 添加全局鼠标移动和抬起事件监听
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
    }
  };

  const handleMouseMove = (e) => {
    // 根据鼠标位置和偏移量计算新的容器位置
    setPosition({
      x: e.clientX - dragOffsetRef.current.x,
      y: e.clientY - dragOffsetRef.current.y
    });
  };

  const handleMouseUp = () => {
    // 移除全局事件监听，结束拖拽
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
  };

  useEffect(() => {
    // 组件卸载时清理全局事件
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        position: 'absolute',
        left: position.x,
        top: position.y,
        width: '600px',
        height: '400px',
        border: '1px solid #ccc',
        backgroundColor: '#f5f5f5',
        cursor: 'move'
      }}
      onMouseDown={handleMouseDown}
    >
      {/* 容器内的子元素示例 */}
      <div style={{
        position: 'absolute',
        left: '50px',
        top: '50px',
        width: '100px',
        height: '100px',
        backgroundColor: '#2196f3',
        cursor: 'default'
      }}>
        子元素1
      </div>
      <div style={{
        position: 'absolute',
        left: '200px',
        top: '150px',
        width: '120px',
        height: '80px',
        backgroundColor: '#4caf50',
        cursor: 'default'
      }}>
        子元素2
      </div>
    </div>
  );
};

export default DraggableWorkspace;

关键注意点： #

• 用useRef存储拖拽过程中的临时偏移量，避免因组件重渲染丢失数据
• 全局监听mousemove和mouseup事件，确保拖拽过程中鼠标移出容器仍能响应
• 组件卸载时必须清理全局事件，防止内存泄漏
• 通过e.target === containerRef.current判断是否点击空白区域，避免触发子元素的拖拽

1. 虚拟DOM vs 直接操作真实DOM #

• 纯JS：直接获取真实DOM节点，手动修改其样式、属性或结构，修改立即反映到页面。
• React：通过虚拟DOM描述UI，所有状态变更会触发虚拟DOM对比，仅将差异部分更新到真实DOM。直接修改真实DOM会被React的重渲染覆盖，这也是你之前方案失效的核心原因之一——比如用Proxy修改DOM属性后，React下次渲染会用虚拟DOM的状态重置DOM。

2. 状态驱动更新 vs 手动DOM修改 #

• 纯JS：UI变化由DOM操作直接触发，逻辑与DOM耦合度高。
• React：UI完全由state/props驱动，修改状态后React自动更新UI。拖拽功能中必须通过修改state来更新容器位置，而非直接修改DOM的style.left/style.top，否则会和React的状态管理冲突。

3. 合成事件系统 vs 原生事件 #

• 纯JS：直接绑定原生事件到DOM节点，事件触发遵循浏览器原生机制。
• React：使用合成事件（SyntheticEvent），将事件委托到根节点，统一处理后再分发。虽然可以通过e.nativeEvent获取原生事件，但绑定/解绑事件需遵循React的钩子规则（如用useEffect管理），否则可能出现事件多次绑定或清理不及时的问题。

4. 组件生命周期/钩子 vs 全局事件管理 #

• 纯JS：事件监听通常全局绑定，无需考虑组件的挂载/卸载状态，容易出现内存泄漏。
• React：组件有明确的挂载、更新、卸载阶段，必须在组件挂载时绑定事件，卸载时清理。比如拖拽的全局mousemove事件，若不在useEffect的清理函数中移除，组件卸载后仍会触发，导致报错。

5. 不可变状态 vs 直接修改DOM属性 #

• 纯JS：可以直接修改DOM的属性或样式。
• React：状态是不可变的，必须通过setState或useState的更新函数修改状态，React才会触发重渲染。若直接修改状态对象（如position.x = 10），React无法感知变化，不会更新UI。

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