0

我有一个包含大约 10,000 个列表的大型数组列表，我想最小化将对象渲染到当前列表。

我发现了几种解决方案，例如 react-window 或 react-virtualized 仅渲染可见组件，但它似乎不适合我当前的需求。

这 10,000 个项目会将某些事件传播到上层组件，为此我已经尝试过上下文，但它似乎会重新渲染每个孩子，即使其中一个项目触发了导致记忆地狱的功能。每个孩子和每个组件都被使用了不必要的记忆。

我已使用键和数组将对象数组简化为以下格式，以便快速处理

  var data = {
    key: [{},{},{}],
    key2: [{},{}],
    ...
    ...
    ..n
  }

现在的问题是反应需要大约一秒钟来区分组件，这使得整个应用程序变慢。如果我去探查器，我发现阵列中的一个组件的反应大约需要 0.1 毫秒，结果是 0.1 * 10000 毫秒，这是太大的差异时间。我想记住这些组件，所以即使我在对象内添加或更新对象，它也只会区分该组件，而不是重新区分每个组件。

eg. Data manipulation equivalent in js
// Suppose only first object's title is changed and updated to state
data[key][0].title = 'asd'

当单个组件将拥有自己的状态和进一步的子组件等等时，这很快就会增加。如果可能的话，我希望有一个有效的解决方案。

4

0 回答 0