Ah! Cool. That is comforting to hear! Thank u for explaining. Not sure why i assumed otherwise.
Sent from my iPhone > On Apr 23, 2015, at 6:19 PM, Mike Thompson <[email protected]> wrote: > >> 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. -- 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.
