相关疑难解决方法(0)

问题如下:

我有几千个元素列表的数据.其中一些是重复的,然后可能有重复键的机会.因为我没有真正的"ID"或任何能让我有机会将所有元素作为唯一键的ID,所以可以使用Math.random()吗？

据我所知,密钥主要用于区分组件.我认为,就我的代码中的密钥没有任何关系,这应该没问题？为了确保没有重复的数字,我可以将两个数学格式相互分开以获得几乎肯定唯一的密钥.

这是一个好习惯吗？我可以使用它而不必担心任何事情吗？

我在处理 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 提要（您可以在我的GitHub API 提要上进行测试）并尝试过滤/扩展所有元素。注意主要的性能损失。

我注意到的

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

题

虽然我很感激在这种特定情况下朝着正确的方向推动，但我最好奇的是如何最好地确定导致这些性能问题的原因。

我已经研究过窗口化输出，但这不是我的第一选择，而且我很确定我做错了什么，而不是因为渲染了太多元素。

感谢您的时间，并提前感谢您提供的任何提示！