javascript - react .js : batching setState to ensure only one DOM layout/paint

Question

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

...通过将事件值更改批处理到一个 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