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