优化多个组件后 React 性能显着恶化

Question

我一直致力于在线游戏应用程序的优化。 它是一个大型 React 应用程序，具有庞大的代码库，而且非常滞后（主要是在移动版本上）。

我遇到的一些问题是：

• 许多内联功能
• 没有记忆
• 很多不必要的内联 styles
• 很多 state 份
• state 突变
• 不必要的循环
• 嵌套映射
• 代码重复

我的任务是提高性能，但目前只针对应用程序的一部分（游戏部分），我一开始所做的是删除内联功能并将它们放在 useCallbacks 中。 然后我使用 Profiler 并注意到哪些组件是最慢的。 然后我只专注于一个组件（与我的雇主达成协议），我在那里所做的是：

• 将代码分成更小的组件
• 删除了不必要的循环和嵌套映射
• 删除了不必要的代码、功能、state 个副本和 state 个突变
• 删除所有内联 styles 并将它们放入 css

再次检查分析器后，组件的性能好多了，但现在应用程序的整个游戏部分的运行情况明显比以前差 - 即使在桌面上也变得明显滞后。 有什么建议或解释为什么会这样吗？ 我该怎么做才能让它变得更好？

Answer 1

由于没有代码，因此很难明确说明导致延迟的原因，但我建议解决以下问题：

1. 代码拆分：如果您的应用程序的游戏部分很大，请考虑代码拆分以在用户访问您应用程序的游戏部分时仅加载代码的必要部分。

2. 虚拟化列表：如果您使用的列表很大，使用虚拟化列表可以提高性能，因为它只呈现可见项目并减少需要管理的 DOM 节点数。 我推荐使用react-window 。

3. 优化技术：利用useMemo和shouldComponentUpdate来防止不必要的重新渲染。 还要确保在可能的情况下使用延迟加载。

4. 重构：重构您的代码以使其更高效。 考虑使用ImmutableJS等库来保持 state 不可变并减少重新渲染的次数。

5. 调试：使用React DevTools查看导致延迟的原因，例如哪些组件不断重新渲染。

6. Web Worker ：利用 Web Worker 来卸载计算量大的任务，减少 API 调用的次数。 您还可以使用这些工作人员缩小您的代码。

Answer 2

根据我的经验，如果使用功能组件，React 必须有钩子。 这允许 React 能够“记住”而不是重新创建函数或未更改的数据片段，如果你不这样做，那么 memory 会很快被阻塞，因此性能会变慢 - 特别是如果它是一个大型应用程序。

删除冗余代码也很重要——如果应用程序的某些部分使用相同的功能，请编写一个 Context 或使用 State 管理工具，例如 Redux，Zustang 有很多可供选择。

State 突变会产生很多错误，它永远不应该在 React 中完成—— “状态是在应用更改时对组件 state 的引用。它不应该被直接突变。” 这就是为什么他们提供回调 function

问题是你没有做错任何事，你必须在最佳实践中覆盖整个应用程序才能使其正常工作，而 state 突变会产生难以识别的错误，例如数据神秘消失、奇怪的排序行为等。 密钥也是如此，例如，如果您在密钥上使用索引 - 您在应用程序中使用过滤器删除某些内容，密钥将更改，因为索引已更改，这会使 React 对此“感到困惑”并产生也难以识别的错误.

你所做的一切都是朝着正确方向迈出的一步 - 问题是是否有其他 state 突变，没有钩子的组件等使应用程序在 Reacts 著名速度下执行