处理大数据和绘图 - React Redux Immutable答案

【问题标题】：Handle large data and drawings - React Redux Immutable处理大数据和绘图 - React Redux Immutable
【发布时间】：2019-01-12 16:01:46
【问题描述】：

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

我将我的项目数据串在减速器存储中。这个项目数据有大量的对象、数组等。我的意思是屏幕上的每个元素，都有一个数据存储在项目中。

当用户进行操作时，我必须重新计算项目并再次将其设置为redux store;

...
      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));

...

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

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

我该如何处理这个问题？

谢谢大家

【问题讨论】：

是否所有的抽奖都根据插入的新项目而改变？
不总是，但我可以说是的。

标签： reactjs redux immutable.js

【解决方案1】：

作为一般观察，toJS() is considered to be the most expensive API in Immutable.js，应尽可能避免。

我最初的建议是to not use Immutable.js。

相反，您可能想考虑使用immer 来处理不可变的更新逻辑。

另外，我们新的redux-starter-kit package 在内部使用了 Immer。

除此之外，我建议进行一些分析，以了解性能瓶颈到底在哪里。

【讨论】：

谢谢你的建议，我会试试的。但我的问题不在于 toJS() 因为它让我返回 state.set('project', fromJS(project));行。