What is Virtual DOM and few other React Doubts

Question

I just started to learn ReactJS. I was used jQuery and Javascript for all my projects previously and got few doubts on ReactJS after gone through tutorials.

1. Why I need ReactJS, still jQuery is there to update DOM and handlebar, dust is there to handle templating.

2. There's a concept Virtual DOM,In tutorials I can see it will take a copy of my DOM and updates only needed. Anyone please explain how it's differ normal DOM manipulation.

3. In React all event handlers are inline, <input onClick={this.eventSample} /> is this recommendable ?

I just started learning,If anyone clears me these doubts with some practical code example. It would be helpful for me to proceed further in React.

Thanks in advance.

Answer 1

With my understanding I'm explaining to make you understand :

Take an example of list times :

1. If one of these list items updates, then the DOM re-renders the entire list. This is where the DOM’s inefficiency stems from.

2. Ideally, we’d like to only re-render items that receive updates, leaving the rest of the items as-is.

React’s use of the Virtual DOM helps to reduce this inefficiency.

Normal DOM Manipulation :

1. Checks through all node’s data at a regular interval to see if there have been any changes.
2. This is inefficient because it requires traversing every single node recursively.

React's virtual DOM:

3. Components are responsible for listening to when an update takes place.
4. Since the data is saved on the state, components can simply listen to events on the state and if there is an update, it can re-render to the UI.
5. light-weight abstraction of the DOM. You can think of it as a copy of the DOM, that can be updated without affecting the actual DOM.
6. In fact, a new virtual DOM is created after every re-render.
7. When updates are supplied to the Virtual DOM, React uses a process called reconciliation — using a “diffing” algorithm that compares/contrasts changes in order to know what updates have taken place.
8. React then only updates those elements that have changed, leaving alone those that have not.

I hope this helps to shed some light on the advantages of efficiency with React’s use of a virtual DOM.

more at Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

React, it’s so much more than a templating engine. The JSX is, therefore, broader then template engines. Hope you know how template engines work. here’s the comparison :

JSX/JS:      javascript -> vdom
Template:    string -> javascript -> vdom

// File 1 - templates/progress.html
<div class="progress-container">
  <div class="progress-bar" data-style="width: $val"></div>
</div>

If you look at the template code, and the component separately, how can you tell where $val comes from?

// File 1 -- progress
const (val) => (
  <div class="progress-container">
    <div class="progress-bar" style={{width: val}}></div>
  </div>
);

In this example, it is perfectly clear where val comes

more at https://stackoverflow.com/questions/32619168/react-engine-vs-other-template-engines

JQuery and React solve two completely different problems.

1. jQuery interacts with the DOM directly.

2. The idea is that DOM elements carry around too much unnecessary data, and the virtual DOM abstracts the relevant parts, allowing for faster performance.

3. In React, you modify the virtual DOM, which it then compares to the existing DOM elements and makes the necessary changes/updates.

   Inline Events :

I can understand why you asked this, In HTML DOM you use inline events as “bad practice”.

Here, In React With JSX you pass a function as the event handler, rather than a string.

When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created.

Instead, just provide a listener when the element is initially rendered. This is actually a React pro.

Hope I cleared your doubts as much as I can