Javascript React.js：批处理setState以确保只有一个DOM布局/绘制

我有一个onWheel处理程序正在执行setState，这会导致更多的布局而不是绘制：

。。。通过将事件值更改批处理为一个setState来避免这种情况，有什么好的模式吗

---

（我认为这个内置软件有一些魔力。）

在我的例子中，这似乎是可行的。在

onWheel

处理程序中缓存更改，然后使用

requestAnimationFrame

计划执行计算并实际设置状态

...

zoomFactor: 0,
zoomX: 0,
zoomY: 0,
onWheel: function (event) {
  this.zoomFactor += event.deltaY;
  this.zoomX = event.nativeEvent.pageX;
  this.zoomY = event.nativeEvent.pageY;
  requestAnimationFrame(this.scheduleZoom);
},
scheduleZoom: function () {

  var scale = ...; // Calc new scale, x, and y
  this.zoomFactor = 0;

  this.setState({
    scale: scale,
    x: x,
    y: y
  });
},

...

---

有关批处理所有更改的较低级别选项，请参见