React连续setState仅触发一次渲染，CSS平移动画失效问题咨询

嘿，这个问题其实和React的状态更新机制以及浏览器的渲染队列都有关系，我来一步步给你拆解：

1. 为什么回调里的setState没触发动画？ #

你最初的写法是把第二个setState放在第一个的回调里，看起来是等第一个状态更新完成后再触发第二个，但这里有个浏览器渲染的“小陷阱”：

React的setState回调确实是在组件完成状态更新和DOM渲染之后执行的，但浏览器并不会立刻把每次DOM变化都画在屏幕上——它会把短时间内的DOM修改攒到一起，一次性完成重绘/回流。

所以当你在第一个setState的回调里马上执行第二个setState时：

• 第一步：React更新状态为translated: false，更新DOM（移除.translated类）
• 第二步：回调立刻触发，React又更新状态为translated: true，再次更新DOM（添加.translated类）
• 浏览器看到这两次DOM变化间隔极短，直接合并成了“最终状态是添加类”，根本没渲染中间的“移除类”状态，CSS transition自然检测不到样式变化，动画就不会触发。

2. 为什么setTimeout就能解决问题？ #

当你把第二个setState放到setTimeout回调里时，相当于把这个状态更新推迟到了下一个浏览器事件循环：

• 第一个setState执行，React更新状态、渲染DOM（移除类），浏览器完成这次重绘
• 等到下一个事件循环，setTimeout回调触发，执行第二个setState，React再次更新DOM（添加类）
• 这时候浏览器能清晰地捕捉到“从无类到有类”的样式变化，CSS transition就正常触发了。

3. 关于连续setState的批量更新补充 #

你提到“时间间隔极近的连续setState仅会触发一次渲染”，这是React的批量更新策略：

• 在React的合成事件（比如onClick）、生命周期函数里，多个连续的setState会被合并，只触发一次渲染和DOM更新
• 但如果是在setTimeout、原生DOM事件回调、Promise回调里，setState会立即触发更新，不会批量合并

回到你的场景，回调里的setState其实不在批量更新的范围内，但因为浏览器的渲染合并，还是导致了动画失效，而setTimeout刚好绕过了这个渲染合并的问题。

内容的提问来源于stack exchange，提问作者Lev