当 React 中有许多组件时，如何提高 React 应用程序的性能？答案

【问题标题】：How to boost performance of react application when you have many components in React?当 React 中有许多组件时，如何提高 React 应用程序的性能？
【发布时间】：2019-10-06 04:51:48
【问题描述】：

很明显，提高应用程序的性能取决于。但是，我认为在某些情况下您可以改进您的应用程序。就我而言，我已将类似的组件替换为 HOC。还有其他建议吗？

【问题讨论】：

使用 Svelte svelte.dev
你有状态组件还是使用redux？你使用纯组件吗？ Here 是如何将项目列表优化为纯组件的示例。根据经验，您永远不会使用 someProp={{new:'reference'}} 或 someEvent={new=>reference}，因为即使您的组件是纯组件，您也会导致重新渲染，尤其是使用事件处理程序时，虚拟 dom 比较将失败并导致 dom 重新渲染。
还有其他建议吗？

标签： javascript reactjs performance testing

【解决方案1】：

使用 React.PureComponent。它可以防止不必要的重新渲染，但要小心，PureComponent 有潜力pitfalls。

【讨论】：

其中一个陷阱非常糟糕：fail to render due to mutating state or props? 有状态组件的项目示例可以是updated to use functional components with hooks 并具有下降容器表示分离。过早的优化经常被用作不编写结构良好的代码的借口；就像使用使用重新选择的容器一样。

【解决方案2】：

性能的一个关键点是要解析的 JS 的大小和由它进行的 DOM 操作的数量。

随着组件数量的指数级增长，LOC 也会随之增长。

向它推荐的主要解决方案是

使用代码拆分和动态导入按需加载组件
如果使用 redux，则批处理 DOM 操作/分派
使用 PureComponents
HOC 的

【讨论】：

【解决方案3】：

如果您在 Chrome 上开发您的网络应用，它的开发者工具有一个名为 Audits 的部分。

审核针对许多场景运行，例如图像加载、无 JS 支持、无互联网、第一次有意义的绘画时间等。它最终会为您提供性能分数。

运行您的 React 应用程序，打开开发者工具并转到“审核”。选择目标平台（移动/桌面）并运行审核。

最后，您将看到可以在您的应用中改进的内容列表。非常方便的工具。

【讨论】：