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. -- 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.
