javascript - 在更新快速移动的 UI 状态时，如何提高 Redux 的性能？

Question

我的问题的细节涉及我将 D3 力图与我的 redux 状态集成。每个 tick 更新都会调度一个操作来更新我的 redux 状态下的位置集合。然后，这些位置与节点数据合并并用于更新我的可视化。 React 处理 DOM，D3 基本上仅用于计算力、碰撞检测等。

我发现使用这种设计模式很难/不可能为用户保持流畅的体验。在我的本地笔记本电脑上，我的操作之间的时间约为 117 毫秒，远低于 60fps(操作之间的时间为 16 毫秒)。

我尝试尽可能简化我的中间件以减少延迟。

我还可以采用哪些其他策略来使用 redux 获得更好的更新时间？或者我正在尝试做一些 Redux 从未打算做的事情？

Answer 1

每个刻度都意味着requestAnimationFrame，对吧？如果没有，请使用它。 :)

如果你只分派(dispatch)一个 Action ，意味着一个 Redux 更新 -> 一个更改回调 -> 一个 React 重新渲染，那么你无能为力，你的计算需要太多，或者你的 React 组件树太大并且不可用。高效(没有 shouldComponentUpdate 等)。

如果您在每一帧上分派(dispatch)多个操作，您可能会发现我过去使用过的一种有用的技术，即包装我的 reducer ，以便它可以一次处理一组操作。这样您就可以避免重新渲染直到最后一个。代码出奇的简单，因为 Redux 的一切都是:

function withBatching(originalReducer){
   return function(state, action){
      if(action.type === 'BATCH' && Array.isArray(action.payload)){
         return action.payload.reduce(state, originalReducer)
      } else {
         return originalReducer(state, action)
      }
   }
}

//now wrap any (or all) of your reducers
const batchedAppReducer = withBatching(myCombinedAppReducer)

在你的 Action 创建器中，不是调度 N 个 Action ，而是调度其中一批:

{
   type: 'BATCH'
   payload: [
     { type: 'MY_ACTION_TYPE', payload: 'xxxx' },
     { type: 'ANOTHER_THING', payload: 'xxxx' }
   ]
}

如果您想对不同 reducer 处理的操作进行批处理，我会在 createStore 之前在组合 reducer 上添加批处理。否则，您只需启用批处理即可满足您的特定需求。

我在制作一些游戏原型(prototype)时使用了这种技术并取得了巨大成功:在我的例子中，我必须一次更新多个实体，但在“世界”状态更新之前不想渲染 ，所以我对所有更新进行了批处理。

希望它能有所帮助，如果您提供有关“更新”周期逻辑的一些详细信息，我将尽力为您提供进一步帮助。