处理大数据和绘图 - React Redux 不可变

Question

我正在开发一个软件，该软件在机械工程师使用的屏幕上绘制一些元素。

我在减速器存储中串起我的项目数据。该项目数据包含大量对象，数组等。我的意思是，对于屏幕上的每个元素，项目中都存储了一个数据。

例如，当用户执行操作时，我必须重新计算项目并将其再次设置为redux存储;

...
      case SET_ACTIVE_UNIT:
        let unit = action.unit;
        project = state.get('project').toJS(); //I'm using immutable
        project = ProjectLogic.addActiveUnit(project, unit, action.shiftKey);
        return state.set('project', fromJS(project));
...

好吧，你会说这种用法是不对的。因为我正在读取所有数据并将其重置为缩减整个数据。你会建议我使用state.setIn但这真的是不可能的。addActiveUnit函数中的Beacuse将重新计算项目，项目数据的%20将被更改。所以，我无法处理这种变化state.setIn

我的问题从这里开始;如果在return state.set('project', fromJS(project));渲染性能变慢后屏幕上绘制了 60-80 个元素。每个新项目都会变得更糟。

我该如何处理这个问题？

谢谢大家

Answer 1

作为一般观察，toJS()被认为是不可变.js中最昂贵的 API，应尽可能避免。

我最初的建议是不要使用不可变.js。

相反，您可能希望查看如何使用immer来处理不可变的更新逻辑。

此外，我们的新redux-starter-kit包在内部使用 Immer。

除此之外，我建议做一些分析，看看性能瓶颈到底在哪里。