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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1276 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

8 条回复 • 2021-06-25 19:51:01 +08:00

seki

2021-06-25 19:05:51 +08:00

数据量有多大？一般情况下 state 体积不影响性能

建议先分析一下首屏时间的瓶颈在哪

TomVista

2021-06-25 19:25:03 +08:00

在 10k-15k,

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

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

我估计要分成首屏 /次屏,然后尽量减少元素数量,
@seki

seki

2021-06-25 19:27:03 +08:00

可以用 react-window 之类的只渲染可见部分

mxT52CRuqR6o5

2021-06-25 19:34:31 +08:00

shouldComponentUpdate 啊

mxT52CRuqR6o5

2021-06-25 19:36:02 +08:00

具体性能具体分析，建议用 chrome 的 performance 工具看看，数据光存在那按照道理影响不了多少性能的，消耗主要来自于渲染层的变化

mxT52CRuqR6o5

2021-06-25 19:36:57 +08:00

如果说是要渲染一个巨大的列表导致渲染慢，可以去找个虚拟列表的库 /组件

TomVista

2021-06-25 19:37:34 +08:00

@mxT52CRuqR6o5
没有多余的 render 整个数据就 setState 了一次,性能看起来不在 react 而是 dom 渲染上...

mxT52CRuqR6o5

2021-06-25 19:51:01 +08:00 via Android

@TomVista 整个虚拟列表，就比如 3 楼说的那个库

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