ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
ReactJS Tutorial: What is DOM? Real DOM & Virtual DOM. Virtual DOM in React with Example 🔥
ฝัง
- เผยแพร่เมื่อ 20 มี.ค. 2022
- ReactJS is one of the most used library and one of the reason behind this is Virtual DOM. Virtual DOM is a "virtual" representation of real DOM and is local to React.
Every tine the state of application changes, React does those changes in Virtual DOM first and then it sync the Real DOM accordingly.
A Virtual DOM objects has same properties as a real DOM object but it doesn't have the powers to directly reflect the changes on the screen.
Think of Virtual DOM as blueprint of a machine, changes made to the blueprint doesn't reflects on the machine itself.
So when there is a update in the virtual DOM, react compares the virtual DOM with snapshot of virtual DOM taken right before the update of virtual DOM.
With help of this comparison React figures out which components in the UI needs to be updated. This process is called Diffing.
Support my channel by liking and sharing my videos so that I can reach to wider audience. Please share it in your network 🙏
►ReactJS Introduction
• ReactJS Tutorial - Int...
►Click here to Subscribe the channel:
studio.youtube....
►JavaScript Course with ES6 Features-:
th-cam.com/users/pl....
►Angular Complete Course:
th-cam.com/users/pl....
►All important shorts videos:
th-cam.com/users/pl....
Connect with Me On Social Media
Facebook: / angularjs4be. .
LinkedIn: / nisha-sin. .
Instagram : / nishasingla05
Twitter: / nishasingla05
Excellent example. I understood the concept on a higher level before but no one explained it with such clear example. Thank You 🙆🏻♂️
Mam nobody has explained this important concept this much clear, this is the perfect example that is required to explain the concept. Great job, Thank you so much.😀
I feel so Lucky for finding your channel!!! Thank you!!!
Stay connected ✌🏻
We need more teachers like you.👍👍👍👍👍
It is the best explanation anybody could have thought of...kudos Nisha
What an easy and perfect explanation, glad to found your channel
very good explanation.
Great Lecture, Thank You....Mam
Nothing is difficult if some one explain topic like this ,,,,,,,,,
thanks.............
Love you mam ❤❤❤ your explanation helps me a lot
😀😀
Clearly explained…thanks
the only video that gives practical example. Thank you
just great example
I really appreciate you, Ms.Nisha, The last 2 min of the video is excellent, I didn't know before. Thank you.
Great explanation
Thank you so muchhh I got the ans for what I'm looking for...
Such great explanation. Looking forward to learn React
Awesome examples and explanations!
Very important concept.. Thanks Nisha!
Best explanation of Virtual DOM
does rendering means refreshing or updating
Nyc explanation of virtual DOM 😍😍. Waiting for more videos from react
Glad you liked it 😃
Good
Nice Explanation on Reactjs....please post more and more videos... With some small project like filling forms and contact... And send to database using API...thanks alot
wow, thanks so much! You are Awesome Nisha Mam.
Thank you 😊
Wow, nice explanation. Understood
Well Explained and very informative, Great job
wonderful and simple explanation .....
Perfect explaination 👌🏻👌🏻👌🏻👏👏👏
Excellent explanation ma'am. Thanks a lot.
Good Job Nisha 🔥🔥
Thank you 😊
very great example.... u have a tendency to simplify complex concepts.. thanks
Perfect explanation
Such a nice explanation...thank you...
Thank you for watching 😀
I have seen so many videos On react ..your one of the best when come across react especially dom explanation...
Do videos on Js/react interview
Very clear explanation mam
Thank you 😊
you the goat. niice explanationn
just amazing
Awesome 👍
😃😃
thank you so much for this video, I was exactly searching for this. but I have a question, isn't it possible to do the same in plain JS what React does? Like without re-rendering the entire component just for updating the clock div?
Now I am clear with the concept, can you tell more about reconciliation?
Waiting for more videos on react
You nailed it. Good Job. Thank you so much.
If I may ask, how much experience do you have with React and JavaScript?
You seem to have really achieved mastery in coding.
No one could ever explain virtual DOM like this with practical implementation and comparison 👏👏 👌, Others were only blabbering theories repeatedly 😡
I started coding from html, css, partials, JavaScript, nodejs and then React. It's been almost 2.5 years, with 6 months of experience working in a company. The remaining 2 years I was working in some management role, I just learned & practiced at home on my own from very beginning.
Now I'm feeling like an ass and idiot for not being smart like you. I believe you must be having atleast 5 years of experience in React. Am I Right??
I'm sorry, I'm feeling jealous.😖
Subtle explanation. Really nice video..
Thank you for your comment 😀😃🥰
What is shadow dom please explain
Mam,expecting indepth videos on Angular
Actually angular is declining,so everyone focusing on react
Mam only use functional component please
This is called basic concept explanation ......you are not like the other youtubers who covered only the theory
A very bad example and was not expecting this from a channel with such good views. The React example will render the whole tree again and again
->setTimer is called by setInterval, a new React element tree is created.
->ReactDOM.createRoot is called every time, re-initializing the entire React root.
->This results in the entire component being re-rendered from scratch every second.
->The input field is reset because a completely new component tree is rendered each time.
To fix this you need to make it a controlled component and have a timer inside the component.
wrong information
What is wrong
Great explanation