V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
TomVista
V2EX  ›  问与答

react 减小 state 和 setState 体积 会明显提升性能吗?

  •  
  •   TomVista · 2021-06-25 19:01:41 +08:00 · 750 次点击
    这是一个创建于 1008 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前拿回来数据之后整个 setState 进去,大概有 80%的无用数据,不会在任何地方用到,目前没法动后端,有没有必要在 setState 之前消减一下体积

    我大概需要提升 10 倍的渲染性能,目前不计算请求耗时,上屏时间在 1.5s,淦

    8 条回复    2021-06-25 19:51:01 +08:00
    seki
        1
    seki  
       2021-06-25 19:05:51 +08:00
    数据量有多大?一般情况下 state 体积不影响性能

    建议先分析一下首屏时间的瓶颈在哪
    TomVista
        2
    TomVista  
    OP
       2021-06-25 19:25:03 +08:00
    在 10k-15k,

    瓶颈在初次更新页面会有大量的元素生成,减少一半的渲染数据,就差不多能提升一倍...

    这么看和 js 部分应该是没关系

    我估计要分成首屏 /次屏,然后尽量减少元素数量,
    @seki
    seki
        3
    seki  
       2021-06-25 19:27:03 +08:00   ❤️ 1
    可以用 react-window 之类的只渲染可见部分
    mxT52CRuqR6o5
        4
    mxT52CRuqR6o5  
       2021-06-25 19:34:31 +08:00
    shouldComponentUpdate 啊
    mxT52CRuqR6o5
        5
    mxT52CRuqR6o5  
       2021-06-25 19:36:02 +08:00
    具体性能具体分析,建议用 chrome 的 performance 工具看看,数据光存在那按照道理影响不了多少性能的,消耗主要来自于渲染层的变化
    mxT52CRuqR6o5
        6
    mxT52CRuqR6o5  
       2021-06-25 19:36:57 +08:00
    如果说是要渲染一个巨大的列表导致渲染慢,可以去找个虚拟列表的库 /组件
    TomVista
        7
    TomVista  
    OP
       2021-06-25 19:37:34 +08:00
    @mxT52CRuqR6o5
    没有多余的 render 整个数据就 setState 了一次,性能看起来不在 react 而是 dom 渲染上...
    mxT52CRuqR6o5
        8
    mxT52CRuqR6o5  
       2021-06-25 19:51:01 +08:00 via Android   ❤️ 1
    @TomVista 整个虚拟列表,就比如 3 楼说的那个库
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2759 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:11 · PVG 20:11 · LAX 05:11 · JFK 08:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.