React-Redux Как улучшить производительность?

Question

Я использую реаги-редукс для одного из моих приложений. Дизайн довольно сложный, а требуемая производительность очень высокая. это на самом деле Wyswyg строитель.

Мы использовали ответ с последних 2 месяцев, затем мы перешли к реактиву-редуксу для разделения кода и улучшения обслуживания, удобочитаемости кода и головной боли родительского и дочернего подхода ofc.

Итак, у меня есть массив, который имеет довольно сложную структуру

Вот так выглядит мое состояние:

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

Поскольку в редуксе рекомендуется иметь как можно меньше данных в конкретном объекте, у меня есть еще один 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.

Какая лучшая практика для ускорения этого? Я делаю что-то неправильно? Я не уверен, что не так в этом коде, и, как рекомендую избыточность, я не могу использовать плоскую структуру для этого конкретного массива в качестве управляемого времени выполнения.

Я уверен, что у компонента есть данные, которые ему нужны.

Есть ли способ обработки больших данных? Эти итерации и изменение состояния убивают мою производительность.

Answer 1

Исходя из моего текущего опыта работы с платформой React-Redux, Повторный выбор и ImmutableJS составляют идеальную комбинацию для ваших требований.

Повторный выбор использует памятка техника на объектах Javascript и список API, специально предназначенный для такого рода большого набора объектов Javascript, что повышает производительность.Прочитайте документы .

Примечание. Перед использованием этой настройки необходимо внимательно ознакомиться с документацией, чтобы использовать лучшие из этих инструментов.

Вы можете создать собственныйстандартный код с использованием вышеуказанных библиотек или используйте ту, которую я сейчас использую в своем проекте.

https://www.reactboilerplate.com/

Этот шаблон специально разработан для повышения производительности.Вы можете настроить его в соответствии со своими потребностями.

Надеюсь, это поможет!