React 组件性能优化纠结中

2023-05-23

我打算优化公司项目字幕功能的状态,因为现在所使用的 Provider 方式会造成大量频繁且无用的重绘,如果能将重绘级别缩小到所使用的组件本身,那么就是最好不过的了。

此前有部分状态已经采用了 Zustand 管理,效果还不错,遂也想迁移过去,但我发现事情并没有这么简单。当前端收到字幕事件时需要判断该字幕是否已经存在于列表当中,才能插入或更新。如果将这个判断的逻辑放在 Store 里面就有耦合业务的情况,不够优雅,但能保证 React 部分不会轻易产生重绘。而放在 Hooks 里面的话,就又得先获取 Store 里面的值到 React 这一层,然而这样做一旦状态的值被更新,必然会触发重绘,就几乎没有任何优化效果。

如果字幕不需要 Provider 或状态管理呢,那就更好了,直接解决掉所有疑惑。此前在产品层面上已经确认让我屏蔽掉底部模式了(展示的行数较少),就是还要一周左右的时间看看使用反馈,没有异议的情况下重构相关组件,取消掉 Provider,其实就已经足以改善性能问题了。

多云 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君