On Friday, April 24, 2015 at 10:18:56 AM UTC+10, marc fawzi wrote: > Given that React works hard to make sure the DOM remains as snappy as > possible, I'm assuming that it batches DOM reads and writes separately so as > not to trigger reflow (as shown in the article below) > > > > http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html > > > > My question is if I'm doing a DOM read operation like getBoundingClientRect > followed by a DOM write operation that would change the size of the bounding > box by say 10% and I'm doing that in say the mousemove event handler (as in > dragging some handle to increase size of some relatively-sized DOM structure) > then what happens in this case? > > > > I'm assuming the DOM reading operation mentioned above must happen against > the browser's DOM since React components don't have that method > (getBoundingClientReact) on them. The value from that read operation is then > written to app state. The write operation I mentioned is done by simply > modifying the style on the props based on the said app state and passing the > modified style value to the component as props and calling render (which is > done automatically when using something like Reagent) > > > I could call getBoundingClientRect only once then keep adding 10% to size as > long as the mouse is down and has moved another X pixels in the expanding > direction. So this way I don't cause reflows with my interleaved read/write > operations. > > > But what if for some reason (forgetting or not knowing) I do not take reflow > into consideration and I cause consecutive reads from actual DOM and writes > to virtual DOM in rapid fire sequence? So I'm reading the DOM and React is > writing to it and each time React writes to it it means my next read will > cause a reflow, and if that happens in an event handler like mousemove then > it could lead to a ton of reflows. > > > Does any of this make any sense or, if it doesn't, what am I missing about > the way React works? > > > Thank you. > > > Marc > p.s. I posted a similar question to the React mailing list many weeks ago and > have not received any replies. I thought some of you here may have a clear > idea of how React works. > > >
Both Reagent and OM do async rendering. Any DOM changes you might make are scheduled via requestAnimationFrame. So DOM writes are done in batches. -- Mike -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/clojurescript.
