1) DOM trees are massive
The popularity of dynamic web apps (Single Page Applications — SPAs) have come with large DOM trees which require constant updates, resulting in significant development and performance pain for developers. For example, as Bartosz Krajka states, “if you [lose] the context of an event handler that you need to change, you have to dive really deep into the code to even know what’s going on. Both time-consuming and bug-risky.”
Instead of using templates, React breaks UI’s down into components. Therefore, instead of using low-level techniques like traversing the DOM tree manually, you simple declare how a component should look. In other words, React does the low-level calls to HTML DOM API methods for you!
2) Fewer real DOM changes === higher performance.
As great as automating DOM updates is, it does not meaningfully solve the performance issue. And this is exactly where React’s use of the Virtual DOM comes into play.
- The Virtual DOM is a technique which builds a virtual representation of what a document should look like.
- Through reconciliation (JSFiddle example), React automatically diffs and re-renders any changes made to data over time, unlike the manual changes required by various other approaches (e.g. Angular.js).
- Tremendous efficiency gains are realized through bundling, or “batching,” changes together and then implementing them at the same time, thus minimizing the number of real, or HTML, DOM modifications.
As noted, Virtual DOM is an especially great choice when building apps where changes in the interface happen a lot.”
About Performance — How does it work anyway?
To begin with, let’s look at React’s two model data types that control a component,
state. From the React Docs,
props pass data from parent to child and are fixed throughout the lifetime of a component.
state, on the other hand, is reserved only for interactivity, or data that changes over time. More on React State and Lifecycle here.
React Components vs. Elements
As for how diffs are found and calculated, we need to look again to the Virtual DOM. Detached from the hinderances of browser-specific implementation details, the Virtual DOM serves as React’s local and simplified copy of the HTML DOM, allowing React to do its computations quickly and efficiently. React Components and Elements are the keys to these computations.
ReactElements are used most frequently and are “light, stateless, immutable, virtual representations of DOM elements…[and] live in the Virtual DOM.”** (React Docs).
ReactComponents, in contrast, are stateful, meaning that whenever their state changes, the component is rerendered. Though they don’t have access to the Virtual DOM, they are easily converted to ReactElements, which capture changes in the Virtual DOM.
What I’ve learned so far: React provides significant development and performance gains over manual front-end methods. Instead of taking the slow process of manually changing the “real,” or HTML, DOM, it uses the Virtual DOM technique and its diff algorithm to implement changes in React like this:
- A change is made on a website which registers to a
- The changed
ReactComponentis then converted to a
ReactElementis inserted to the virtual DOM
- The diff algorithm compares and updates the Virtual DOM quickly and easily
- Virtual DOM diffs are batched and then converted to the low-level (HTML DOM) code, which is executed in the DOM and optimized per browser.
- * Facebook “recommends using JSX to describe what your UI should look like. Each JSX element is just syntactic sugar for calling