react组件较多时，拖拽遇到性能问题，造成页面卡顿

Question

题目描述

使用react搭建一个页面搭建平台，当页面元素较多时，拖拽出现卡顿，初步判断是react自身的调度相关的时间太多（不知是否正确）。（文末有codesandbox连接）

大体实现思路是：
有一个config变量（组件变多，这个变量就会很大），layers里面装的是每一个组件的相关配置。每一个组件都是以绝对定位的方式定位在页面上，x代表left,y代表top。

DashBoard组件会解析这个config配置，引入相关的组件，渲染在页面对应的位置

在拖动组件的时候，每触发一次mousemove事件就去修改这个config变量。从而实现拖动效果

只有一个组件时，react setState执行时间是15ms，不卡

有51个组件时，react setState执行时间是35ms，有点卡，

有101个组件时，react setState执行时间是75ms，非常卡

performance截图，能够看到react花的时间很多，如何能够减少react相关调度时间，以让页面拖拽流畅

自己的思路

目前已经采用React.memo和immer.js将非必要的组件重复渲染减少至我认为的最低（请大佬赐教），
拖动时只有箭头部分会重复渲染

相关代码

https://codesandbox.io/s/reac...

你期待的结果是什么？

能够减少react自身调度时间，让页面拥有150个组件时 拖拽比较流畅

Answer 1

如果拖拽一个元素不会影响到其他元素（就算会影响也可以，也就是工作量会稍微多一些）
可以在onMouseDown时隐藏当前元素 并复制该元素 让该元素单独拖动 并更新独立的config 而不影响全局config对象。待MouseUp后移除该复制的元素，更新全局config对象并取消隐藏被拖拽的元素。
这样应该就不会收到已有元素数量的限制，希望这个方案能帮助到你。

Answer 2

我提供一个思路。最近也在做性能优化，对于拖拽场景，可以绕过 react 调度，直接操纵 dom。这样不用节流也很流畅。