Question

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

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

例如，当用户执行操作时，我必须重新计算项目并将其重新设置为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));

...

好的，您会说这种用法不正确。因为我正在读取所有数据并将其重置为减速器整体数据。您会建议我使用state.setIn，但这确实是不可能的。由于addActiveUnit函数将重新计算项目，因此将更改％20的项目数据。因此，我无法处理此更改state.setIn

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

我该如何解决这个问题？

谢谢

Answer 1

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

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

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

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

除此之外，我建议进行一些性能分析，以了解性能瓶颈的确切位置。

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

1 个答案: