react-dnd中getHandlerId()的作用、用法及常见疑问解答

ID的本质 #

getHandlerId() 返回的是 react-dnd 内部注册表，给当前 useDrop（或useDrag）注册的拖拽交互实例分配的全局唯一ID。
你每调用一次useDrag/useDrop注册一个可拖拽节点或者放置节点，react-dnd内部的全局注册表就会生成一个不重复的ID，和这个节点的所有配置、状态绑定，内部所有拖拽状态更新、事件派发全靠这个ID找对应的实例。

为什么要把ID挂到data-handler-id属性上 #

这个属性是给拖拽后端（react-dnd默认用的是HTML5Backend）做快速命中检测用的。
拖拽过程里浏览器返回的dragenter、dragover、drop事件，目标元素可能是放置区域里的任意子元素，甚至可能是飘在上面的其他遮挡元素。如果每次事件触发都遍历所有已注册的放置目标、挨个算坐标做碰撞检测，节点多了会非常卡。
后端的处理逻辑很简单：从事件触发的DOM节点开始往上找，碰到第一个带data-handler-id属性的节点，直接读属性值就能拿到对应的放置目标ID，瞬间定位到当前悬停/命中的是哪个放置节点，完全不用做复杂计算，性能高很多。

示例代码的逻辑对应 #

你看到的示例代码逻辑刚好对应整个流程：

• 在useDrop的collect配置里从monitor取handlerId：collect函数跑在react-dnd的内部上下文里，能直接拿到当前useDrop注册的放置实例对应的唯一ID，对应示例代码：

collect(monitor) {
  return {
    handlerId: monitor.getHandlerId(),
  }
},

• 从useDrop返回值里解构出handlerId：把这个ID拿到组件的渲染逻辑里，对应示例代码：

const [{ handlerId }, drop] = useDrop<

• 给DOM节点加data-handler-id属性：把ID标记在真实DOM上，给底层后端的事件检测逻辑用，对应示例代码：

<div ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId}>

为什么API文档没写这个方法 #

这个属于半内部的实现细节：对只用官方默认后端的普通开发者来说，不需要知道ID的生成规则，照着示例把ID挂到对应DOM上就能正常跑；只有自己写自定义拖拽后端的开发者，才需要靠这个ID匹配拖拽实例。文档没收录属于维护疏漏，不是什么特殊的黑魔法。

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