账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react组件较多时,拖拽遇到性能问题,造成页面卡顿
    10
    0
    题目描述使用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个组件时 拖拽比较流畅
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    aa_92cb0bd09f:发布了悬赏问题9414754预计能赚取 0积分收益
    月亮降落点:发布了悬赏问题9414754预计能赚取 11积分收益
    轻衫萦住:发布了悬赏问题9414754预计能赚取 11积分收益
    若见顾倾心:发布了悬赏问题9414754预计能赚取 11积分收益
    发布了悬赏问题9414754预计能赚取 11积分收益
    aa_69e4d15635:发布了悬赏问题9414754预计能赚取 0积分收益
    北梦木兮:发布了悬赏问题9414754预计能赚取 0积分收益
    潇湘雨夜独听琴:发布了悬赏问题9414754预计能赚取 0积分收益
    醉看山河寂:发布了悬赏问题9414754预计能赚取 0积分收益
    发布了悬赏问题9414754预计能赚取 10积分收益