“You can think of ReactJS as a small library orbiting around the DOM. However as ReactJS is integrating with more and more things, the picture kind of flips around” (credits to Sebastian Markbåge):
We all know that working directly with the DOM is slow. Because performance is crucial, one of ReactJS’s foundation stones is the Virtual DOM which makes the server-side rendering possible and allows re-rendering the entire UI every time the data changes without being prohibitively expensive. This means that ReactJS apps can easily run at 60fps even on mobile devices. Behind the scenes, the Virtual DOM relies on an efficient diffing algorithm that compute the minimal set of DOM mutations before actually touching it. The diffing engine works kind of the same way as the one used by the source repositories to stores the different revisions of a source file. Remember: whenever applicable, an algorithm will always find the best solution, whereas a human is prone to making errors.
Another important aspect of ReactJS is how it keeps the model in sync with the UI. With the traditional imperative programming paradigm, the way that you would normally handle this would be to initially render the markup at time = 0 and then manually sync its representation every time a change occurs in the model (time = 1, time = 2 etc.). For example, if you are using only jQuery to do the updates, the code quickly becomes spaghetti. With ReactJS you declaratively describe the UI at any point in time, not just the initial render, and let the view do all the required mutations when needed. It’s that simple: whenever there’s a change in the state, the entire thing is re-rendered. This is called one-way reactive data flow and will see how well it fits with everything else, especially with Flux, in some other article.
Speaking about programming paradigms, functional programming becomes a first-class citizen with ReactJS not only in theory but also in practice, which means that the components are represented as idempotent and composable functions. The tree-like data structure resulted in the diffing process between two subsequent function calls will be transparently translated into a list of DOM mutation operations which ultimately will be reflected into the DOM. This is a big leap toward transforming theoretical functional programming concepts into actual code.