React JS Tutorial 4: What is Virtual DOM?

what is going on everybody my name is May ho and welcome to your fourth react.js tutorial in which I'm gonna tell you basically what react offers also known as virtual Dom is so react actually a lot of libraries other libraries also up or something like virtual Dom but I'm just going to discuss it to a reference to react right now so what react does is is that behind the scenes it creates a whole copy of the exact Dom you have on your screen right so let's just say if this is your dorm that this is your dorm I hope you understand Dom document object model all these nodes so what react would do let me just get my hands dirty with paint so let's say if we organize the strong dawn in the form of let's just say some sort of trees or something so you know this is the hard to rotate so let's just go with a line on it so the necessary is this something like this right so this is your actual norm right your actual dog so what react would do is that behind the scenes it would create an exact copy of the same dog but instead this would be reacted on right so this is react to Dom or what we could say is virtual long right and whatever manipulation you do in the data right react would let's just say you modified something in this node of the tree of the Dom tree so you can just place it again and you're running out of space anyway let's just say you change something in this in this node right so now what happens is that react chicks that are the two trees matching well it sees that this node is not matching right so reacts down which was the copy of the actual Dom is now not matching to the Dom which is created when you modify a component or any part of your app using react react or updated virtual Dom we can say right so what reacts does is we'll just compare these two nodes or you know it will just compare all nodes and see that these two do not match so react would go to the Dom and would update only this node which is updated inside virtual Dom right so react to the just update this Dom this node on the actual Dom so it kind of says a lot of you know time because querying actual Dom is kind of expensive and actually updating it every time like if you just replace the whole down with this it's quite expensive because you will just the browser would need to calculate the CSS and you know on the layouts and margins again it's kind of kind of expensive tasks to do if your application is big so react kind of brings in virtual Dom concept so that it just updates whatever is actually needed to be updated on the actual log so actual Dom is kind of hard and I mean it's kind of expensive to mess up with so we create another Dom copy and we just update it when it's needed so that's how pretty much reacts virtual Dom model works and from the next tutorial onwards we will just gone up get some code into our script files so that's all for this one and if you liked it then don't forget to subscribe and thank you for watching

Channel: codedamn

Views: 56,210

Rating: 4.7467251 out of 5

Keywords: React, ReactJS, JavaScript

Id: RquK3TImY9U

Length: 4min 22sec (262 seconds)

Published: Mon Apr 03 2017