An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-V
Highlights of Part — IV
- Every time a new repaint happens in a real DOM tree, it comes with a huge performance cost. This is because more calculations are involved.
- Reflow and Repaint are identified by the browser to optimize the process
- React adds an extra layer before the browser. This extra layer is called virtual DOM.
- When anything is updated, react creates new virtual DOM. This in turn compared with the old virtual DOM. This process is called ‘ Diffing’.
- All the changes in DOM are sent to the queue, this queue is then batched.
- These batched changes are sent as a single update to the original DOM. This makes it a Batch update. It is this batch update that makes it easier and optimises performance.
Understanding Virtual DOM from JS perspective
We know that DOM has a tree data structure. In Javascript, trees are represented by javascript objects. Since JS is a Real-DOM manipulator, we can leverage the same to a virtual DOM manipulator. Just like we manipulate real DOM through DOM queries, we manipulate virtual DOM through React DOM queries. Just like DOMs are made up of DOM elements, React/Virtual DOMs are made up of React elements.
Note: Above explanation is for easier understanding. In reality DOM elements and React elements are not the same. In reality, react elements are instructions for creating browser/real DOM.
Creating React element
React creates elements using React.createElement
If you want to have an h1 element in the browser DOM, we should first create in react DOM.
Since react takes care of browser DOM, we don’t need to care of browser DOM. We will only care about React element.
React.createElement
(
‘ h1’,
{
id:’blog’
},
‘ PansofArjun’,
)
Above method(createElement) creates <h1 id=’blog’>PansofArjun</h1> in actual DOM
If you observe, there are three arguments in the above createElement method.
First one — the type of element we want to create i.e h1
The second one — elements properties i.e id:’blog’
The third one — elements children — any node inserted between opening and closing tag i.e PansofArjun
Suppose if you want to console log this react element, we need to create a variable to store this element because we can’t directly console log React.createElement.
Therefore,
const element = React.createElement
(
‘ h1’,
{
id:’blog’
},
‘ PansofArjun’,
)
If you were to console log, you get a JS object
{
type:’h1',
key: null,
ref:null,
props:{
id:’blog’
children:’PansofArjun’
},
_owner:null,
_store:{}
}
The Object keys are type, key, ref, props,_owner and_store. We will learn ‘ type’ and ‘ props’ now.
type — what type of element we want to create in real DOM
props — data and child required to construct the real DOM
Magic of props.children!
In the above example, props.children are set to ‘ PansofArjun’ which is a text node. We can also set this to another element node like lists.
React.createElement
(
‘ ul’,
null,
React.createElement(‘li’,null,’one’),
React.createElement(‘li’,null,’two’),
React.createElement(‘li’,null,’three’),
)
If we were to console log this like earlier
{
type:’ul’
props:{
children:[{
type:’li’,props:{children:’one’ etc},
type:’li’,props:{children:’two’ etc},
type:’li’,props:{children:’three’ etc}
}]
etc
}
}
Note: It includes the key, ref, owner and store.
We said ‘props’ includes data and children to construct the real DOM. But wait! where is data here? It is the value of props.children key — one, two and three.
We can store data as an array like const arr = [one,two,three].
React.createElement(
‘ul’,
null,
arr.map(data => React.createElement(‘li’,null,data))
)
What we did above separated data from UI elements i.e we stored data separate variable(arr) and integrate them into UI using javascript logic(map functions)
Separating data from UI is one of the major advantages of using React.
We can comfortably say from above that ‘ React is made up of React elements’ which is self-evident from props.children !
Originally published at https://www.pansofarjun.com on March 15, 2022.
