Help me understand React's reflow strategy


(Alex Lowe) #1

Hi. I’m new to React. I’ve read about React’s virtual DOM, and I’ve also acquainted myself with the some of the research on tree-diffing algorithms, specifically the Zhang-Shasha algorithm, and it’s “1-dimensional” cousin, the Levenshtein algorithm. I understand that React performs a tree-diff with the actual DOM in a single batch after the virtual DOM is mutated, and the tree-diff fragment gives the real DOM the fastest path to match the virtual DOM.

My question is, how does this minimize reflows on the actual DOM? Ostensibly, given a set of DOM mutations, we could just lift body element out of the page, mutate it any way we like and then when we’re done glue it back to the page, causing only a single reflow. I know I’m misunderstanding something here, so I’d appreciate it if someone could set me straight. Thanks!