React Draggable Item 性能不够

如何解决React Draggable Item 性能不够

我创建了一个可拖动的 react 组件，您可以通过从“actions-holder”div 拖动它来移动它，问题是，这性能不够，所以当我在 Y-Index 中太快地拖动元素时，鼠标退出 div 完全停止拖动并造成糟糕的用户体验。我尝试使用不同的状态或对象，但性能是相同的（这是注释掉的）

这是组件：

import React,{useState,MouseEvent,useContext} from 'react'
import './window-container.css'
import ZIndexContext from '../../context/ZIndexContext'

interface Props {
  barStyles?: object,backgroundStyles?: object,zindex?: number,windowName?: string,}

interface DiffObj {
  x: number,y: number,}

export const WindowContainer : React.FC<Props> = ({ children,barStyles,backgroundStyles,zindex,windowName }) => {

  const [diffObj,setDiffObj] = useState<DiffObj>({
    x: 0,y: 0,})
  // const [diffX,setDiffX] = useState<number>(0)
  // const [diffY,setDiffY] = useState<number>(0)
  
  const [dragging,setDragging] = useState<boolean>(false)
  const [styles,setStyles] = useState<object>({})

  const { updateSelected } = useContext<any>(ZIndexContext)

      function dragStart (e: MouseEvent<HTMLdivelement>) {

          setDiffObj({
            x: e.screenX - e.currentTarget.getBoundingClientRect().left,y: e.screenY - e.currentTarget.getBoundingClientRect().top,})

          // setDiffX(e.screenX - e.currentTarget.getBoundingClientRect().left)
          // setDiffY(e.screenY - e.currentTarget.getBoundingClientRect().top)
          
          setDragging(true)
      }

      function whileDragging (e: MouseEvent<HTMLdivelement>) {
          if(dragging) {
              const left = e.screenX - diffObj.x + e.currentTarget.getBoundingClientRect().width / 2 - 16
              const top = e.screenY - diffObj.y + e.currentTarget.getBoundingClientRect().height / 2 - 8

              // let left = e.screenX - diffX + e.currentTarget.getBoundingClientRect().width / 2 - 16;
              // let top = e.screenY - diffY + e.currentTarget.getBoundingClientRect().height / 2 - 8;
  
              setStyles({ 
                  left: left,top: top,})
          }
      }

      function dragEnd (e: MouseEvent<HTMLdivelement>) {
          setDragging(false)
      }

    if(zindex === 0 ) return null; 

  return(
  <div
    // onMouseDown={() => updateSelected(windowName)}
    className={dragging ? "window-container window-container__selected" : "window-container"}
    onmouseup={dragEnd}
    onMouseMove={whileDragging}
    style={{...styles,...backgroundStyles,zIndex:zindex}}
  >
    <div className="window-bar"
      style={barStyles}
    >
      <div className="actions-holder"
          onMouseDown={dragStart}
      >
        <div className="window-bar-circle"></div>
        <div className="window-bar-circle"></div>
        <div className="window-bar-circle"></div>
      </div>
    </div>
    <div className="window-content">
      {children}
    </div>
  </div>
);
}

这是 CSS：

.window-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-width: 200px;
  min-height: 300px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}

.window-container__selected {
  Box-shadow: 0 0 0 4pt royalblue;
}

.window-bar {
  height: 30px;
  display: flex;
  padding: 16px;
  align-items: center;
}

.actions-holder {
  display: flex;
  height: 16px;
  width: 100%;
  cursor: move;
}

.window-bar-circle {
  height: 16px;
  width: 16px;
  background-color: rgb(17,17,0.5);
  border-radius: 50%;
  margin: 0 2px;
}

.window-content {
  padding: 16px;
}