顺序setState调用不按预期工作

Question

我正在创建一个带有css类切换的动画组件.沙盒的例子在这里.

CSS类是针对conditionaly应用transitioned领域,所以当我们应该得到一个动画transtioned领域的云的形式false来true.

问题:

如果状态修改如下,动画不会发生:

animateWithoutST = () => {
    this.setState({transitioned: false}, 
    () => this.setState({transitioned: true}))
  }

但是如果第二个setState在setTimeout回调中被调用,它会起作用:

 animateWithST = () => {
    this.setState({ transitioned: false },
    () => {
      setTimeout(() => this.setState({ transitioned: true }))
    }
    )
  }

animateWithoutST尽管我的组件以正确的顺序呈现,但为什么没有按预期工作？

Answer 1

这看起来绝对奇怪,我不得不深入研究它,直到我明白发生了什么.

所以,是的,没有setTimeout它不起作用,甚至在componentDidUpdate方法中并没有解释:你正在改变状态,它更新,并且渲染被调用两次但是因为浏览器优化我们没有看到动画发生:"浏览器不会重新渲染在同一动画帧中发生变化的内容".

当你使用时,setTimeout你强迫第二次状态更新进入下一个动画帧,瞧你看动画.即使将当前超时值设置为0,它也可能无法在某些浏览器上运行,但如果将值设置为> 16ms aprox,则prob将始终有效(您需要一个大于动画帧的值).

您还可以使用requestAnimationFrame两次以确保两个状态更新都属于不同的动画帧,请在此处进行检查.

我在本文中找到了所有这些信息,检查它是因为它得到了很好的解释.现在对你有意义吗？