From the course: The DOM in JavaScript, jQuery, AngularJS, and React
Join today to access over 24,500 courses taught by industry experts.
The React virtual DOM approach
From the course: The DOM in JavaScript, jQuery, AngularJS, and React
The React virtual DOM approach
- [Instructor] ReactJS takes a totally different and unique approach in updating the DOM. First let's see what the DOM looks like for this page. I'm going to press the F12 key to show the dev tool and I'm just going to select the team name here, title here so you see the DOM tree here, okay. So well first we actually create a virtual DOM out of this real DOM and store this virtual DOM in memory. Then it will ask for any changes occur in any of the components in the virtual DOM and it modifies only the virtual DOM. Finally, when it's ready to update and render the DOM, React compares the real DOM and it's virtual DOM and then if there are any changes at all, then instead of updating and rendering the entire elements in the DOM, it renders only what's necessary, just the pieces of the elements that are changed leaving everything else alone. I think this is fabulous. So in other words, if things aren't broken or altered, why fix them or change them. This is a very very powerful feature…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.