Btw the example is entirely contrived and may not make complete sense. I'm attempting to convey a DOM read/write scenario that may (or may not) cause repeated reflows. Id like to educate myself on how React works as far as minimizing potential reflows... if it does at all.
Sent from my iPhone > On Apr 23, 2015, at 5:18 PM, Marc Fawzi <[email protected]> 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. > > > > -- 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.
