What is React DOM ?

webmaster — Thu, 24 Mar 2022 12:30:23 +0000

It is an object which exposes a number of top level APIs to interact with the browser DOM.
It provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page.
Most of your components should not need to use this module.
It consists of following methods:
- render ()
- findDOMNode ()
- unmountComponentAtNode ()
- create Portal ()
- hydrate ()

render ()

It is used to render a single React Component or several Components wrapped together in a Component or a div element.
In ReactDom it is one of the most important methods.
This function uses the efficient methods of React for updating the DOM by being able to change only a subtree, efficient diff methods, etc.
Element, Container, Callback are three parameters used in this method.

Syntax:

findDOMNode ()

It is used to get the DOM node where a particular React component was rendered.
The following method can be done by adding a ref attribute to each component itself and it is used rarely in ReactDOM.
It is also useful for reading values out of the DOM, such as form field values and performing DOM measurements.
A single parameter component that expects a React Component to be searched in the Browser DOM.

Syntax:

unmountComponentAtNode ()

It is used to unmount or remove the React Component that was rendered to a particular container.
It is better to remove the component, making the web page more efficient.
A single parameter container which expects the DOM container from which the React component has to be removed.

Syntax:

create Portal ()

It is used to create a portal and provide a way to render children into a DOM node that exists outside the hierarchy of the DOM component.
It allows us to render a component into a DOM node that resides outside the current DOM hierarchy of the parent component.
Child, Container are the two parameters used in this method.

Syntax:

hydrate ()

It is equivalent to the render () method, but is implemented while using server-side rendering.
Element, Container, Callback are the three parameters used in this method.

Syntax:

What is virtual DOM ?

webmaster — Tue, 22 Mar 2022 06:51:48 +0000

It is a lightweight JS object which is an in-memory representation of real DOM.
It is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.
Virtual DOM has the same properties as that of the Real DOM, however it lacks the power to directly change the content of the screen.
It is also considered as a part of “virtual DOM” implementation in React.
Although the concept has been around for several years, it was made more popular by its use in the React framework.
It is Created by “Richie Harris”.

Why do we need a virtual DOM ?

In our client-side application has a super complex structure, which will result in a complicated DOM tree.
Manipulating DOM at once can without problems result in overall performance.

For example, let’s take this simple HTML document with an unordered list one list item.



 

 
    
        List item

This document can be represented as the following DOM tree.

We need to adjust the content of the first list item to “List item one” and also add a 2nd listing object. we will need use the DOM APIs to find the elements we need to replace, create the new elements, upload attributes and content, then finally replace the DOM elements themselves.

const listItemOne = document.getElementsByClassName("list__item")[0];
listItemOne.textContent = "List item one";

const list = document.getElementsByClassName("list")[0];
const listItemTwo = document.createElement("li");
listItemTwo.classList.add("list__item");
listItemTwo.textContent = "List item two";
list.appendChild(listItemTwo);

what is virtual dom in react - Wikitechy

What is React DOM ?

render ()

findDOMNode ()

unmountComponentAtNode ()

create Portal ()

hydrate ()

What is virtual DOM ?

Why do we need a virtual DOM ?