如何最轻松地识别React渲染性能的瓶颈？

如何解决如何最轻松地识别React渲染性能的瓶颈？

在使用JSON查看器时，在识别渲染性能瓶颈时遇到问题。只有很少的元素，它的性能很好，但是到了某个时候，它变得很烦人。

检查事件探查器后，似乎元素渲染速度足够快，但是我注意到一些不确定的问题。

概述

• 该应用程序是JSON查看器，可让您一次扩展/最小化所有元素以及单个元素。
• 几乎没有元素，性能不错，但随着元素数量的增加，性能似乎急剧下降。
• 使用performance.now()对我的对象过滤器方法进行性能分析并在React DevTools中检查渲染时间时，这些数字似乎还可以。我可能解释错了。
• 我尝试在无状态元素（尤其是最常呈现的键/值）上使用React.memo()，但似乎并没有明显改善性能。诚然，我不确定我是否对记住React组件背后的理由足够了解，以实现这一点。

实施

• 当前，我的应用程序将数据加载到父级中，然后使用递归元素将其加载到加载JSON树的组件中。
• 从URL加载JSON提要会更改父组件的状态，该父组件的状态通过使用输入到输入字段中的值的辅助方法进行过滤。

问题

有两种功能可以使JSON文档的响应时间变慢（不是很大）：

• 全部展开按钮
• 过滤器查询的前几个按键

在当前的实现中，所有过滤和扩展操作都会触发子元素上的display: none更改，这种行为使我相信我在处理此用例方面做得很低效。

复制步骤

代码可在此处获得：https://codesandbox.io/s/react-json-view-4z348

在这里建立了生产版本（性能没有改善）：https://csb-4z348.vercel.app/

要重现该问题，请尝试使用“全部扩展”功能（过滤器输入旁边的加号）和一些过滤器输入。

然后，尝试加载包含更多元素的JSON feed（可以在我的GitHub API feed上进行测试），然后尝试过滤/扩展所有内容。请注意主要的性能影响。

我注意到的东西

• 在记录useEffect时，最小化似乎导致约2倍于全部扩展的重新渲染。
• 随着过滤器输入变得更加具体，随着渲染元素的减少，性能（逻辑上）也会提高。

问题

尽管我希望在这种情况下朝着正确的方向前进，但我最好奇的是如何最好地识别导致这些性能问题的原因。

我已经考虑过将输出窗口化，但这不是我的首选，而且我很确定自己做错了事，而不是因为渲染了太多元素。

感谢您的宝贵时间，在此先感谢您提供的提示！

解决方法

看来我已经回答了我自己的问题。问题是一个reconciliation问题，原因是在我的子组件中使用UUID作为关键道具，这导致它们在最小化状态每次更改时都重新渲染。从文档中：

密钥应稳定，可预测且唯一。不稳定的键（例如 由Math.random（））产生的那些将导致许多组件实例 和DOM节点被不必要地重新创建，这可能导致 子组件的性能下降和状态丢失。

我将把步骤留给遇到此问题的其他人。

---

在Performance Profiler中（太长时间）进行挖掘之后，我注意到每次最小化或扩展元素时，都会再次挂载每个孩子。向Google查询了更具体的查询后，我发现了this blog post，并意识到自己犯了这个公然的性能错误。

找到问题的根源后，我会found many other references解决问题。

固定关键道具后，互动时间缩短了约60％，可以最大限度地减少/扩展所有内容。

最后，我记住了与即时过滤器相关的其他一些组件，并且最终它的性能似乎达到了我目前想要的水平。

感谢所有同时看过此书的人，我希望这对可能遇到此问题的人有所帮助。