javascript - Redux 性能每秒都会对存储进行大量更改

Question

我正在创建一个用于俱乐部/派对表演的视听应用程序。它涉及以 60fps 运行的 webGL 动画。

动画响应多个参数，这些参数可能每秒不断变化(例如，旋转立方体的大小可能会随着音乐脉动)。例如，可能有 20 个参数，全部每秒改变六十次。这些参数在 UI 中表示为数字/可视条。

我正在使用 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 的可视化和屏幕上同时出现的 slider /控件？

如果是的话，您仍然可以拥有一个托管您的 UI 控件的 React 应用程序和一个包含您的 canvas 的单独 DIV。 React 部分将使用标准 Redux 来保持参数状态，并且您的 WebGL 独立代码应在每个 requestAnimationFrame 上从存储中读取并渲染您的场景。

您还可以使用 Redux 中间件对 requestAnimationFrame 上的操作进行排队和分派(dispatch)，如此处文档中的建议(请参阅 rAF 调度程序示例)

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