我们已经使用react-dnd实现了拖放操作，它工作正常。问题是当我们想要在拖动时获取元素的位置时，检查是否上下放置。当前我正在按照以下方式获取位置：

悬停时，我将在y的位置内部useDrop Hook.MY代码为：

const [{ isOver,canDrop },drop] = useDrop({
  accept: getacceptType(schema),drop: addComponentOnDrop(schema),collect: monitor => ({
    isOver: monitor.isOver({ shallow: true }),canDrop: monitor.canDrop(),}),hover(props,monitor) {
    if (!monitor.canDrop()) {
      return;
    }
    const { y } = monitor.getclientOffset();
    sety(y);
  },});

使用y的值，我正在检查悬浮的元素是否在dropTarget之上或之下。我的代码是：

function mouseOver(event) {
  const { target } = event;
  const { top,height } = target.getBoundingClientRect();
  if (y < top + height / 2) {
    sethover("above");
  } else {
    sethover("below");
  }
}

我在这里设置的状态用于更新上下文api.setHover（）是上下文api的一部分。上下文api用于我的容器组件，其中我编写了方法（addComponentOnDrop）以在架构上添加组件/ array集合。

它正在工作，但效率不高。还要更新状态/上下文api以在上方/下方显示onHover的样式如此之快，以至于状态更新太频繁并显示故障。请提出一些有效的方法来实现此目的。