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

Question

我有一个 onWheel 处理程序正在执行 setState，它导致的布局多于绘制：

...通过将事件值更改批处理到一个 setState 来避免这种情况的任何好的模式？

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

Answer 1

就我而言，这似乎有效。缓存onWheel处理程序中的更改，然后安排进行requestAnimationFrame计算并实际setState.

...

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
  });
},

...

---

有关批处理所有更改的较低级别选项，请参阅https://github.com/petehunt/react-raf-batching