Reactjs 请求时Redux调度AnimationFrame需要250-300毫秒

我很难弄明白为什么会出现这种情况，但我的React应用程序中最简单的操作之一是在每个动画帧上调度，如下所示：

  step = () => {
    if (this.player.howler.playing()) {
      this.props.playProgress(this.player.seek())
      window.requestAnimationFrame(this.step)
    }
  }

playProgress是一个非常简单的动作，但执行起来却花费了相当长的时间：

/**
 * Dispatched when currentlyPlaying's position changes
 *
 * @param  {integer} pos Position to progress to (in seconds)
 *
 * @return {object} An action object with a type of PLAY_PROGRESS
 */
export function playProgress(pos) {
  return {
    type: PLAY_PROGRESS,
    pos,
  }
}

它是这样减少的：

case PLAY_PROGRESS:
  return state
    .setIn(['currentlyPlaying', 'pos'], action.pos)

---

到底为什么要花这么长时间来执行

window.requestAnimationFrame

在再次执行之前只提供16ms的时间，所以250ms不会剪切它。。。感谢您的帮助

这是一个老问题，但我相信这与我们在Chrome中遇到的无限滚动问题有关。这里有一个简要说明：github.com/castedrocks/react infinite scroller/pull/125

你能发布一些计算时间的代码吗？@huachengzan Chrome Dev Tools显示100-150ms，当播放器启动时，帧数从50-60fps变为每秒几帧。你到底想看什么？这里是一个屏幕截图：大约14000毫秒是播放器打开和操作开始执行的时间。您是否尝试过取消对

playProgress

的呼叫-看起来您可能调用得太频繁了。请记住，每次更新状态时，每个容器都会将存储重新映射到道具，如果不同，则重新渲染。@AndrewBreen这是波形进度，因此，它确实需要尽可能快地执行：/@trevorhinesley第一步仍然是将调用去抖动到执行所需的时间，以确保您没有添加额外的处理并减慢调用队列。然后，您可以调查该部分状态在何处使用-听起来您的问题似乎贯穿整个周期（dispatch=>action=>reducer=>connect）-您无法对操作或reducer做更多的工作，因此您需要确定如何调度以及连接的组件如何工作。