大状态下的React / Redux性能

Question

我正在处理一个具有很多可编辑值（* big意味着> 1000）的大json，它完全呈现在同一页面上，所以我的状态很简单{ data: bigBigJson }。

最初的渲染时间很长，但是还可以。

问题在于，当输入触发一个onChange（和一个redux动作）时，该值会在状态中更新，并且整个渲染会再次发生。

我不知道人们如何处理？是否有简单的解决方案（甚至不一定是最佳实践）。

笔记：

• json文件由外部API提供，我无法更改

• 我可以将状态分为几个子状态（这是多个级别的json），但希望有一个更简单/更快的解决方案（尽管我知道这可能是最佳实践）

• 我正在使用react和redux，不是immutable.js，但一切都是不可变的（显然）

-

更新（关于DSS答案）

•（情况1）假设状态为：

{
  data: {
    key1: value1,
    // ...
    key1000: value1000
  }
}

如果keyN更新了，所有状态都将重新渲染，对吧？减速器将返回如下内容：

{
  data: {
    ...state.data,
    keyN: newValueN
}

那是一回事，但这不是我的情况。

•（第2种情况）状态更像（过于简化）：

{
  data: {
    dataSet1: {
      key1: value1,
      // ...
      key10: value1000
    },
    // ...
    dataSet100: {
      key1: value1,
      // ...
      key10: value1000
    }
  }
}

如果dataN.keyN已更新，我将退还给减速机

{
  data: {
    ...state.data,
    dataN: {
      ...state.data.dataN,
      keyN: newValueN
    }
  }
}

我想我做错了，因为它看起来不太好。它会改变这样的东西吗：

// state
{
  dataSet1: {
    key1: value1,
    // ...
    key10: value1000
  },
  // ...
  dataSet100: {
    key1: value1,
    // ...
    key10: value1000
  }
}

// reducer
{
  ...state,
  dataN: {
    ...state.dataN,
    keyN: newValueN
  }
}

最后，为了更具体地说明我的情况，以下是我的减速器的外观（仍然有些简化）：

import get from 'lodash/fp/get'
import set from 'lodash/fp/set'
// ...
// reducer:
// path = 'values[3].values[4].values[0]'
return {
  data: set(path, {
    ...get(path, state.data),
    value: newValue
  }, state.data)
}

•如果您想知道，我不能只使用：

data: set(path + '.value', newValue, state.data)

因为其他属性也需要更新。

Answer 1

重新呈现所有内容的原因是商店中的所有内容都发生了更改。看起来可能一样。所有属性可能具有相同的值。但是所有对象引用均已更改。也就是说，即使两个对象具有相同的属性，它们仍然具有单独的标识。

由于React-Redux使用对象标识来确定对象是否已更改，因此，只要对象未更改，就应始终确保使用相同的对象引用。由于Redux状态必须是不可变的，因此可以保证在新状态下使用旧对象不会引起问题。不变的对象可以用整数或字符串的相同方式重复使用。

为了解决您的难题，您可以在化简器中遍历JSON和存储状态子对象并进行比较。如果它们相同，请确保使用商店对象。通过重用同一对象，React-Redux将确保代表这些对象的组件不会被渲染。这意味着，如果这1000个对象中只有一个发生更改，则只会更新一个组件。

还要确保key正确使用React 属性。这1000个项目中的每一个都需要有自己的ID，该ID在JSON和JSON之间保持不变。

最后，考虑使您的状态本身更适合此类更新。您可以在加载和更新状态时转换JSON。例如，您可以存储以ID为键的项，这将使更新过程快得多。