Обработка больших данных и чертежей - React Redux Immutable - PullRequest
Новая
       6

Обработка больших данных и чертежей - React Redux Immutable

0 голосов
/ 12 января 2019

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

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

Когда пользователь выполняет действие, я должен пересчитать проект и, например, снова установить его в избыточное хранилище; 

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

Моя проблема начинается здесь; если на экране отображается 60-80 элементов, то после return state.set('project', fromJS(project)); производительность рендеринга замедляется. Каждый новый предмет становится все хуже.

Как мне справиться с этой проблемой?

Спасибо всем

1 Ответ

0 голосов
/ 13 января 2019

Как общее замечание, toJS() считается самым дорогим API в Immutable.js , и его следует избегать, насколько это возможно.

Мой первоначальный совет: до , а не , используйте Immutable.js .

Вместо этого вы можете захотеть использовать immer для обработки логики неизменяемого обновления.

Кроме того, наш новый пакет redux-starter-kit использует Immer для внутреннего использования.

Кроме того, я бы предложил провести некоторое профилирование, чтобы увидеть, где на самом деле находятся узкие места перфорации.

...