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

2021-06-25 19:01:41 +08:00
 TomVista

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

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

756 次点击
所在节点    问与答
8 条回复
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
@TomVista 整个虚拟列表，就比如 3 楼说的那个库

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/785824

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX