40 How does Reactjs work Updating HTML element on a webpage involves using the

40 how does reactjs work updating html element on a

This preview shows page 40 - 44 out of 44 pages.

40
Image of page 40
How does React.js work? Updating HTML element on a webpage involves using the DOM API. It needs to recalculate the layout and repaint the page. For website with many dynamic components, each of these updates triggers same set of computation which make the whole process inefficient. To optimize runtime performance, React components are first rendered into a managed virtual DOM. 41
Image of page 41
Virtual DOM DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is a lot slower than most JavaScript operations. In React, for every DOM object, there is a corresponding "virtual DOM object." When a React element is updated, the corresponding virtual DOM objects get updated. This operation is much faster as in JavaScript. Also multiple updates (of multiple elements) can be applied to the Virtual DOM. Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the updates. React then knows exactly which virtual DOM objects have changed. Now React just needs to inform the real DOM to update only those updated objects, with all the changes grouped into one. 42
Image of page 42
Readings React Documentation Main Concept 1. Hello World 2. Introducing JSX 3. Rendering Elements 4. Components and Props 5. State and Lifecycle 6. Handling Events 7. Conditional Rendering 43
Image of page 43
References IBM Developer Web Development React: Create maintainable, high-performance UI components Getting Started with React An Overview and Walkthrough React: The Virtual DOM 44
Image of page 44

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture