requestAnimationFrame执行时React组件多次重绘的浏览器行为疑问

结论 #

对应选项2：浏览器每次组件重绘时调度重新布局与重绘，但仅在update函数执行完成后才实际执行。

详细解释 #

• 浏览器的渲染流水线（布局→绘制→合成）采用异步批量处理机制。在同一个事件循环帧内（包括requestAnimationFrame回调执行阶段），所有DOM变更都会被暂存到队列中，不会同步触发重排重绘。
• React的forceRender本质是触发组件状态更新，最终产生的DOM变更同样遵循这个规则——不会立即触发渲染，而是被纳入当前帧的待处理批次。
• requestAnimationFrame的回调本身就是在浏览器即将执行重绘的前一阶段触发的，回调内的所有操作都会被整合到当前帧的渲染任务中。只有当回调执行完成后，浏览器才会一次性处理所有累积的DOM变更，完成一次布局和重绘。

优化建议 #

虽然单帧内多次触发组件重渲染不会导致多次重绘，但会引发不必要的React内部计算（比如组件的render、VDiff过程会重复执行）。如果组件逻辑复杂，可能会增加当前帧的计算耗时，进而影响帧率。建议尽量合并单帧内的状态更新，避免多次调用forceRender。

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