reactjs - 提高反应应用程序性能

Question

我目前正在开发一个基于 react redux 的 Web 应用程序，它在 UI 上显示大量数据。当数据大小增加时，每秒的帧数会减少。此外，某些显示组件的表单需要更长的时间并且看起来很慢。如果有人可以指导我正确的渲染方法或此类应用程序需要遵循的一些编码标准，那将是一个很大的帮助。-谢谢

我目前正在检查我的应用程序是否使用反应生命周期组件（由任何其他开发人员明确表示）。我也怀疑组件的渲染方式。

标签： reactjs

Answer 1

您好，欢迎来到 StackOverflow！您的问题非常笼统，因此很难准确指出如何解决它。
我想我要做的第一件事是在开发人员工具中查看 chrome 的性能选项卡。您可以使用它来分析您的应用程序并查看哪些功能需要的时间最长。您可以在此处和此处
找到有用的信息。 这会给你一个很好的起点。 至于分析 React 应用程序，您可以查看 React 的 Dev Tool profiler，更多信息可以在这里找到。

您可能还需要确保避免使用已弃用的生命周期函数，因为众所周知它们会导致性能问题。那些是：

componentWillMount
componentWillRecieveProps
componentWillUpdate

并确保在组件挂载后执行所有 HTTP 请求。

如果一切都失败了，你应该研究一下记忆​​技术。记忆基本上是将函数调用的结果保存在内存中，因此下次使用相同的参数调用函数时，您无需重新计算输出。为此，您可以使用 React 的内置备忘录功能来记忆完整的组件，并使用选择器（如reselect）来记忆 redux 计算。