Javascript 大对象的Redux性能

我正在使用Redux和React构建一个web应用程序。我的应用程序是一个分析应用程序，呈现大量数据。当我的商店变大时，我会遇到性能问题

在redux中避免大数据性能问题的首选方法是什么

应用程序结构 我的应用程序的结构是，我有

设置

（小json）、

结果

（大json）和

计算（设置）

。计算具有确定性和幂等性。我的应用程序以图形、表格等形式呈现设置元数据和结果

因为calculate是确定的且幂等的，所以我知道当设置不变时，结果不会改变。当设置更改时，我的结果可能会更改。换言之，我习惯于仅依靠设置来确定是否需要更新UI

Redux行为和潜在解决方案 当我在商店中包含结果时，我的应用程序运行缓慢：

let settings = { foo: "bar" };
let results = calculate(settings);
Object.assign({}, state, { settings: settings, results: results });

//deterministic and idempotent
function calculate(settings) {
  return /*large json*/;
}

let settings = { foo: "bar" };
let results = calculate(settings);
Object.assign({}, state, { settings: settings, results: () => results });

//deterministic and idempotent
function calculate(settings) {
  return /*large json*/;
}

我的应用程序在引用时速度很快，但在我的应用商店中不包含结果：

let settings = { foo: "bar" };
let results = calculate(settings);
Object.assign({}, state, { settings: settings, results: results });

//deterministic and idempotent
function calculate(settings) {
  return /*large json*/;
}

let settings = { foo: "bar" };
let results = calculate(settings);
Object.assign({}, state, { settings: settings, results: () => results });

//deterministic and idempotent
function calculate(settings) {
  return /*large json*/;
}

我知道redux建议不要存储函数，所以另一种方法是使用字符串保存引用…类似于：

let settings = { foo: "bar" };
let calculationId = uuid(); //could also be a hash of settings if I want to avoid some false positive UI re-rendering
let results = calculate(settings);
setResults(calculationId, results);
Object.assign({}, state, { settings: settings, calculationId: calculationId });

//deterministic and idempotent
function calculate(settings) {
  return /*large json*/;
}

let fakeStore = { calculationId: null, results: null };

function setResults(calculationId, results) {
  fakeStore. calculationId = calculationId;
  fakeStore.results = results;
}

function getResults(calculationId) {
  if(fakeStore.calculationId === calculationId) {
    return fakeStore.results;
  }
  throw new Error("Invalid data access");
}

render() {
  let calculationId = this.props.calculationId;
  let results = getResults(calculationId);
}

将大数据保留在存储之外是站得住脚的，但似乎有更好的方法来支持此用例

使用redux 3.7.1、react 15.4.2、react redux 4.4.8进行尝试。每次计算后，结果对象引用是否会更改？如果是这样的话，这个小库应该可以帮助您。

简单地“将值保存到存储”不会影响任何速度。重要的是如何在减缩器中处理这些值，并在UI中使用它们。所以，给出具体的建议有点困难，因为你没有给出任何关于你如何实际使用这些数据的信息

一般来说，根据另一条评论，当输入实际发生变化时，使用记忆选择器（由重新选择库创建）仅有助于重新计算昂贵的派生值

有关改进Redux使用性能的更多信息，请参阅：

• 我的
• 我的博客帖子

---

是的，大多数计算后结果都会发生变化。如果您的结果是经过计算的，并且取决于其他状态属性，我建议使用选择器，而不是将结果存储在存储区中。我链接的“重新选择库”可以提高性能，因为只有在输入发生更改（在您的情况下是设置）时，它才会重新计算。计算不是性能瓶颈。我很少在必要时重新计算。计算本身可能不是瓶颈，但结果对象引用的更改可能是。如果是，请不要将结果保存在存储本身中。再见，谢谢。这些资源非常有用！我将调查我的数据是如何处理的。我怀疑我在某个地方无意中触发了浅层平等性检查，这些检查跨越了几个较大的对象。