javascript - Throttle Reactjs Event System -
i have splitpane component react project, upon re-size panes react width , change content. split pane component has following event listners...
componentdidmount: function() { document.addeventlistener('mouseup', this.onmouseup); document.addeventlistener('mousemove', this.onmousemove); window.addeventlistener('resize', this.onresize); } onmouseup: function() { //firing here },
i have viewed dev tools timeline , events firing often, , page not performing expectations. how can throttle these events?
edit - quick reply, use timer , not introduce module, know fact not state change since changes @ 3 breakpoints, , timeline shows events firing (yellow)
my check state -
shouldcomponentupdate: function(nextprops, nextstate) { console.log("stated changed") console.log(nextstate.showstackingtablestate) console.log(this.state.showstackingtablestate) return nextstate.showstackingtablestate !== this.state.showstackingtablestate; },
update - thinking should way...if mouse down, trigger boolean, if boolean true throttle, else false.
is events firing often, or how you're handling events (e.g. causing many re-renders)? i'm betting it's latter, , if so, can throttle timer, or use helper underscore's throttle
.
Comments
Post a Comment