还有很多其他方法可以优化 React 应用程序。并非所有应用都适用于每个应用，也不是你所做的每件事都会显著提高性能。我最近被分配了一个任务，上面写着“提高应用程序的性能”。这是我在记录这段旅程。
步骤 1 — 查找性能开始下降的方案
我很幸运，当我被告知性能下降如此之大以至于用户体验绝对无法忍受时，我被告知了这种情况。要找出所有此类方案，需要严格地继续在应用程序上执行各种操作，并在性能开始下降时继续监视。没有直接的方法可以做到这一点，唯一的方法是让越来越多的人使用该应用程序并报告他们的经历。另一种方法也可能是生成大量虚拟数据，并尝试将所有这些数据加载到UI上，看看它的表现如何。此外，不要指望一次找到所有方案，你会不时发现它们，然后你可以执行以下步骤来提高每个方案的性能。
步骤2 - 调试并尝试找到真正的罪魁祸首
下一步是调试并查看真正导致性能滞后或下降的原因。为此，你可以在开发工具中使用探查器，还可以突出显示在特定操作上重新呈现的所有组件。对我来说，这两个效果最好，因为它们可以帮助我理解重新渲染的内容，并且分析器也会告诉您原因。探查器还将告诉你哪些组件需要多少时间来呈现，以及你的应用总共需要多少周期才能达到就绪状态。此外，如果我看到嵌套循环并查看这些循环是否花费大量时间才能完成，我也使用javascript中的conport.time()方法。在我的场景中，我得到了一些提醒，即我们使用的 React 上下文导致了主要问题。
单击此处阅读有关 React 分析器的所有信息。
步骤 3 — 使用以下技术提高性能
在本节中，我将列出我所做的帮助我提高应用性能的操作。
从状态中删除了实际上不需要重新渲染组件的变量：
我们有两个上下文，并且大约有10-15个状态变量。这样做的问题是，每次由于setState而重新渲染上下文时，它都会继续进行并导致使用上下文的所有子项重新渲染。我删除了所有没有理由继续重新呈现组件的状态变量，我还删除了作为值传递给上下文提供程序的所有变量，这些变量可以派生或未在整个应用中的任何地方使用。这是一个重要的学习，我们倾向于把一切都放在上下文中，而你应该只添加你真正需要的东西。
在正确的地方使用了上下文：
我看到在一些组件中，我们调用了上下文，但没有真正使用上下文的任何属性。相反，我们将其作为道具传递给子组件。这会导致大量重新呈现，因为在上下文中重新呈现会触发组件 A 重新呈现，这将导致组件 B、C 和 D 的所有子级重新呈现。只有组件 D 中才需要上下文，因此我直接将上下文移动到子组件。我对我看到的每个地方都这样做了，上下文变量作为 prop 传递给子组件。
添加了空值和空检查：
我看到我们呈现了一个子组件，该子组件需要来自父组件和子组件内部的一些数据，该组件添加了对存在数据的检查。这种方法没有错，但是如果子组件作为少数组件使用Effects或正在调用其他API，则将数据作为空/空检查移动到父组件是有意义的。您根本不需要将子组件呈现给 DOM，因为它没有值。这将节省应用在呈现子项并调用其中的所有挂钩和 API 时可能遇到的所有性能影响。
重构代码：
我执行的一个一般步骤是尝试理解编写的代码，特别是在数据作或添加到数组中，或者我们使用嵌套循环等。将数组转换为有意义的映射，进一步从use中删除变量效果依赖项数组，因为它们没有添加任何值，最后还删除了对没有多大意义的数据的检查。对于不同的应用程序，此步骤可能会有所不同，并且必须非常小心地完成，因为您不希望破坏已经工作的内容。因此，理想情况下，尝试尽可能深入地首先理解逻辑，然后如果您有信心，请继续重构它。
结论
使用上述方法，我能够为我的应用减少大约 25-30 次重新渲染。将初始页面加载时间缩短了几秒钟，并将响应时间缩短了一两秒(在性能受到重大影响的情况下)。这是一段旅程，我仍在努力让它变得更好:D
最后，还有很多其他方法可以优化 React 应用程序。并非所有应用都适用于每个应用，也不是你所做的每件事都会显著提高性能。有时问题很清楚，解决它们会使应用程序具有高性能，在其他情况下，问题很复杂，很难增加任何性能改进。但总而言之，优化你的代码是一个有趣的旅程，你可以学到很多东西，大多数时候，学习一个交易技巧，你觉得为什么我之前不知道这一点?
经常花时间重构代码，经常花时间评估性能，因为如果你不这样做，它可能会突然变得太晚。
京公网安备 11010802030320号