Производительность Redux с большим количеством изменений в магазине каждую секунду

Question

Я создаю аудиовизуальное приложение для выступлений в клубах/вечеринках. Он включает анимацию webGL, которая работает со скоростью 60 кадров в секунду.

Анимация реагирует на несколько параметров, которые могут постоянно меняться каждую секунду (например, размер вращающегося куба может пульсировать для музыки). Например, может быть 20 параметров, которые меняются шестьдесят раз в секунду. Эти параметры представлены в пользовательском интерфейсе в виде номеров/визуальных баров.

Я использую React/Flux/NWJS для этого, и он отлично работает. Однако мне действительно нравится Redux и хотел бы изменить поток данных на модель Redux.

Мой вопрос: Будет ли обновление хранилища неизменным способом (например, копирование его для каждого изменения) повлияет на производительность, когда оно может меняться более 60 раз в секунду? Если да, есть ли способ обойти это для определенных частей приложения и просто использовать Redux для менее частых изменений в приложении.

Answer 1

Если вы используете WebGL для своих визуальных эффектов, вы можете сохранить Redux, но пропустите React all. Redux не зависит от React, вы можете использовать его семантику и затем делать что-то, когда Store изменяется, регистрируя обратный вызов с помощью subscribe.

http://es.redux.js.org/docs/api/Store.html#subscribe

Это не ясно для меня аспект вашего приложения, будет и визуализация с WebGL и слайдеров/управления, присутствующих на экране в то же время?

Если они есть, у вас все еще может быть приложение React, в котором будут размещаться элементы управления пользовательского интерфейса и отдельный DIV, содержащий ваш canvas. Часть React будет использовать стандартный Redux для сохранения состояния параметров, и ваш независимый от WebGL код должен считываться из магазина каждые requestAnimationFrame и отображать вашу сцену.

Вы также можете использовать промежуточное программное обеспечение Redux, что очередей действий и отправка на requestAnimationFrame, как это было предложено в документации здесь (смотрите пример планировщика RAF)

http://redux.js.org/docs/advanced/Middleware.html#seven-examples