Javascript 如何提高性能？

我正在为我的一个应用程序使用react redux，设计非常困难，性能要求非常高。实际上是wyswyg builder

在过去2个月里，我们一直在使用react，然后我们转向react redux以分离代码，并提高维护性、代码可读性和亲子方法

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

这就是我所在州的样子：

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

由于redux建议在特定对象中拥有尽可能少的数据，因此我有另一个8-9 reducer，它与主状态分开

我的问题：builder对象非常复杂，几乎有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建议的那样，我不能将此特定阵列的平面结构用作其托管运行时

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

---

有没有办法处理大数据？这种迭代和状态的改变正在扼杀我的性能。

基于我目前使用React-Redux框架的经验，为您的需求提供完美的组合

Re-Select在Javascript对象上使用了这项技术，并列出了专门处理此类大型Javascript对象的API列表，从而提高了性能。读这本书

注意：在使用此设置之前，应明智地阅读文档，以充分利用这些工具中的最佳工具。

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

这个样板是专门为性能而设计的。您可以根据自己的需要进行定制

希望这有帮助

对于UI状态（本例中拖放元素的可视位置），我不会使用Redux来处理该数据。这是我让本地组件状态处理的少数事情之一。我不确定在你的情况下，这是否会是一个性能上的成功。把Redux想象成一个浏览器数据库。您不会像在数据库中拖放位置那样存储短暂的数据。