How does React work?
React.js is built around doing functions, which take status updates from the page and translate them into a virtual representation of the resulting page. Whenever React is informed of a change of state, it reruns those functions to determine a new virtual representation of the page, then that result is automatically translated into the DOM changes needed to reflect the new presentation of the page.
Well, it uses a concept called the virtual DOM that selectively makes sub-trees of the nodes based on changes of state, developing this, with the least amount of possible DOM manipulation, to keep the components updated, structuring their data.
[vc_single_image image=”23035″ img_size=”large”]
How does the virtual DOM work?
Imagine that you have an object that is modelled around a person. You have all the relevant properties of a person that you could have, and it reflects the current state of the person. That is what React does with the DOM.
Now think, if we take that object and make some changes. A moustache, biceps and other changes have been added. In React, when we apply these changes, two things happen:
- First, React runs a ” diffing ” algorithm, which identifies what has changed.
- The second step is reconciliation, where the DOM is updated with the results of diff.
The one that makes React, before these changes, instead of taking the real person and reconstructing it from scratch, would only change the face and the arms. This means that if you had the text in an entry and an update was carried out, as long as the parent node of the entry was not scheduled for the update, the text would remain unchanged.
That’s how React is taking a big boom, becoming more & more used in mainstream web and app development.
Wanna Learn react? Here are few good resources to start: learn react in 5 min, react js tutorials, Cheat sheet for react developers.
Are you are looking for a development company or want to hire a developer or a team to work and develop in React.js? – We are who you need to contact.
2 thoughts on “How does React.js work?”
Hello, I am looking for someone to help with my RStudio homework and I was wondering if you were familiar with R studio. My homework is due in 2 days and I have no idea what this class is all about. Any help would be appreciated. Thanks
Yes we are familiar, please send details in email