如果你正在移动的组件不需要在每次移动时更新（迭代并创建5000个组件），你可以使用React.memo，它将使一个函数组件的行为类似于一个类组件，使用shouldComponentUpdate浅层比较。

import React from "react";
import "./styles.css";
import { useState } from "react";

const SPAN_COUNT = 5000;

var spans = Array.from(Array(SPAN_COUNT).keys());

export default function App() {
  const [moving, setMoving] = useState(false);
  const [layerDefaultPosition, setLayerDefaultPosition] = useState();
  const [moveObjectStyle, setMoveObjectStyle] = useState({
    position: "relative",
    top: "0px",
    left: "0px"
  });
  const handleLayerMouseDown = e => {
    setMoving(true);
    const { left, top } = moveObjectStyle;
    setLayerDefaultPosition({
      x: Number(left.split("px")[0]) - e.pageX,
      y: Number(top.split("px")[0]) - e.pageY
    });
  };

  const handleLayerMouseUp = () => {
    setMoving(false);
  };

  const handleLayerMouseMove = e => {
    if (!moving) {
      return;
    }

    const dx = e.pageX + layerDefaultPosition.x;
    const dy = e.pageY + layerDefaultPosition.y;

    const left = `${dx}px`;
    const top = `${dy}px`;

    setMoveObjectStyle({ ...moveObjectStyle, left, top });
  };

  return (
    <div
      className="App"
      style={{ position: "relative", overflow: "hidden", height: "100vh" }}
    >
      <div
        style={moveObjectStyle}
        onMouseDown={handleLayerMouseDown}
        onMouseUp={handleLayerMouseUp}
        onMouseMove={handleLayerMouseMove}
      >
        <MemoSpans spans={spans} />
      </div>
    </div>
  );
}

const Spans = ({spans}) => {
  return (
    <div
      style={{ width: "600px", height: "500px", backgroundColor: "red" }}
    >
      {spans.map(x => (
        <span style={{ display: "inline-block", fontSize: "5px" }}>a</span>
      ))}
    </div>
  )
};

const MemoSpans = React.memo(Spans);

这将停止在每次移动方块时重新创建5000个元素，并且仅在span属性更改时重新创建它们（浅比较）。