Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Virtual Dom in react.js

If I have a structure like—

<Header />
<Body />
<footer />

which internally contains html tags like h1, div, ul, li etc

My question is whether Virtual dom is formed by html tags i.e., h1, div, ul, li or react elemnts like – <Header />, <Body /> and <Footer />

This question in my mind arose when I came to know about react’s reconciliation algorithm. what does react actually compares? Does it do shallow comparison and checks whether rendered child component like – <Header />, <Body /> is changing? or performs deep comparison and checks if present in is changing and updates only that particular div?

********************* EDIT *******************************

so I have this another question-

What if my react structure is like

<Header /> {renderBody()} <Footer />
where this renderBody() is a JS funstion which returns some JSX. Now if my component conataining <Header /> {renderBody()} <Footer /> is re-rendered will it always update/re-render renderBody()’s HTML or will perform re-conciliation inside renderBody()’s HTML to update only required tags?

Tags:

2

Answers


  1. 0

    As the name suggests the virtual dom does not contain actual HTMLElements but rather is a deeply nested structure of objects that describe the shape of the elements that will later be rendered in the browser.

    // just an example not exactly how
// Reacts VNodes look like
const node = {
  tag: "div",
  attrs: {},
  children: [],
}

    At the the application start you have a virtual dom, lets call it t0. On state changes a new virtual dom is created, lets call tn. React then iterates over the virtual nodes in those trees and compares the tag, attrs and children with some assumptions to speed up the whole process. During the comparison an update function is generated that when called will only update the actual elements that need updating.

    Edit: This is actually a good read if you want to get a better understanding of Reacts inner workings.

    Login or Signup to reply.
  2. 0

    First: HTML elements are not representative of Virtual Dom. Your Components like "" or Components you Created is The part of Dom Tree.

    These Components Return HTML Elements. (You know Everyone I think)

    Secondly: You ask Reconciliation Algorithm:
    (All Know I Thinks compares the current virtual Dom with the Previous to determine changes )
    The process is called Diffing(You can search about it I only know the name of the process). You already know about the shallow comparison.

    Third: Reconciliation within renderBody() you provide as a jsx.
    React will perform reconciliation within the returned JSX of renderBody()
    Also Inside renderBody() it deep checks the changes in which part of renderBody() i.e. your HTML element. react will re_evaluate the function returned value and perform reconciliation within the returned JSX to update only the required parts.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search