Question

我正在为我的一个应用程序使用react-redux，设计非常困难，而且性能要求很高。它实际上是所见即所得的生成器。

我们从最近2个月开始就一直使用React，然后移至react-redux进行代码分离，从而提高了代码的可维护性，代码可读性和父子方法。

所以，我有一个结构非常复杂的数组

这是我的状态：

const initialState = {
  builder:{},
  CurrentElementName:"",
  CurrentSlideName:"",
  .......
}

由于redux建议尽可能减少特定对象中的数据，因此我还有另一个8-9减速器，它们与主要状态分开。

我的问题：构建器对象非常复杂，其下层，对象和数组几乎降低了3-4级，所有这些都由托管运行时提供。

因此，在componentdidmount上，我的应用程序将调用服务器获取数据并填充builder:{}

builder:{
   slidedata:[{index:0,controName:'button',....},{index:0,controName:'slide',....}],
   currentSlideName:'slide1',
   currentElementName:'button1'
}

此构建器对象非常复杂，并且取决于用户操作，例如，减速器正在更改此构建器对象的拖放，更改属性，更改事件，更改位置

 let clonedState= JSON.parse(JSON.stringify(state));
 //doing other operations

每次更改该对象时，都需要执行某些复杂的操作，例如，添加新幻灯片将执行某些操作，并将幻灯片添加到名为slidedata的当前数组中。

什么是最快的方法来加快速度？难道我做错了什么？我不确定这段代码有什么问题，并且作为redux的建议，我不能将此结构的扁平结构用作其托管运行时。

我确定该组件具有该组件所需的数据。

有什么方法可以处理大数据？这种迭代和状态的改变杀死了我的表现。

Answer 1

根据我目前对React-Redux框架的经验，Re-select和ImmutableJS为您的需求提供了完美的组合。

Re-Select在Javascript对象上使用memoization技术，并具有专门处理这些大型Javascript对象集的API列表，从而提高了性能。阅读docs。

注意：在使用此设置以最好地使用这些工具之前，应明智地阅读文档。

您可以使用上述库创建自己的样板代码，也可以使用我当前在项目中使用的样板代码。

https://www.reactboilerplate.com/

此样板是专门为性能而设计的。您可以根据需要自定义它。

希望这会有所帮助！

React-Redux如何提高性能？

1 个答案: