我正在使用 Redux 和 React 构建一个 Web 应用程序。我的应用程序是一个呈现大量数据的分析应用程序。当我的商店变大时,我会遇到性能问题。
避免 redux 中大数据出现性能问题的首选方法是什么?
应用程序结构
我的应用程序的结构如下:设置
(小 json)、结果
(大 json)和计算(设置)
。计算是确定性和幂等的。我的应用程序以图形、表格等形式呈现设置元数据和结果。
因为计算是确定性和幂等的,所以我知道当设置不改变时结果不会改变。当设置发生变化时,我的结果可能会改变。换句话说,我很乐意仅依靠设置来确定是否需要更新 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*/;
}
我知道 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);
}
将大数据保留在存储之外是可行的,但似乎可能有更好的方式 React 支持此用例。
使用 redux 3.7.1、react 15.4.2、react-redux 4.4.8
最佳答案
简单地“将值保存到存储中”不会影响速度。重要的是您在 reducer 中处理这些值以及在 UI 中使用它们的方式。因此,给出具体建议有点困难,因为您没有提供有关实际如何使用该数据的任何信息。
一般来说,根据其他评论,使用内存选择器(由 Reselect 库创建)有助于仅在输入实际更改时重新计算昂贵的派生值。
有关提高 Redux 使用性能的更多信息,请参阅:
关于javascript - 大型对象的 Redux 性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45358420/