1) How Browser Dom works?
I will try to explain it in a simplified manner. Take a look at the following picture.
When our code is written in html and CSS, html code and CSS stylesheets are parsed by Html and CSS parser respectively. Then html tags are put in a Dom tree which look like the following picture. You can think of this like a reversed tree presentation where <html> is the root and is put in the top.
Then, Dom tree and CSS style rules get mingled to display the output as we see UI in the screen. In detail, Html Dom tree children go through Reflow/layout stage and these are colorized in the Re-painting stage.
What Virtual Dom does is to minimize the time execution of layout and repainting stage. The more item have to go through layout and repaint stage, the more time it takes and it slows down the performance of app.
2) How Virtual Dom works?
Virtual Dom in React is acting like agent between Browser Dom (Actual Dom) and declarations of code. Here, virtual Dom is taking all responsibility for taking actions to change the relevant area of actual dom.
We already know that Virtual Dom’s task is to minimize the execution of layout, repaint. But how can be done?
First, see if virtual Dom isn’t there how it works. Take a look at the right side JS version without virtual dom.
Now, if you try to put a text input in the input field you won’t able to do it because of re-rendering the whole Dom again and again every second.
In the react version, you will get the same output as the previous one. But here, if you want to put a text in input field, you will be able to do it. But why?
Notice the blinking pinkish background in the both React and JS version. This blinking background indicates that where the re-rendering of the Dom is happening.
In the JS version, blinking is happening in the container class div. It re-renders the main container div which means the whole body is re-rendered in every second. So, if you put a text, due to updating the UI your input in the input field doesn’t remain for a certain amount of time. All this things happening in actual dom.
On the hand, in the React version, blinking is happening only in the time portion of dom. In a result, instead of updating the whole Dom, the time portion in the Dom gets updated only and the other children remain same. So, the execution of layout and repaint stage also get reduced due to update the specific portion.
But how React identify specific portion where to update? Here, React creates a Virtual Dom and compares with the actual Dom by Diffing algorithm which detects where to make a change in the actual dom. Finally make change by tree reconciliation.
3) React is a Library not a Framework:
Ask yourself. What is the benefit of using framework?
May be you will be able to use some ready-made UI kits, pre-build structural design of project. But if you use any library, you can use necessary methods, classes and functionalities according to your need. That means you have a freedom to use this library in your own way. It’s easy to mix with 3rd party libraries.
But frameworks don’t allow you to be free. In a bigger project if you want to change any internal configuration or bring change into features. you will have to fight against framework.
Now, choice is yours to decide what to use, in other word, what works best for your situation.
4) React is declarative
Here, I don’t tell react what needs to done rather what needs to look like. I want to list the name in the interface.
5) Separation of concern:
In react, the ability of compartmentalize a bigger component into small chunks make application of logic easier. By the naming of component and small chunks, we can easily figure out that where it needs to make the change.
There are two types of component in terms of functionality. One is container/functional component and another is presentational component. Functional component is concerned about the functionality like state change, calculations etc. and presentational component is concerned about the looking of UI in the screen. So, presentational component doesn’t necessarily need to know what is happening behind the value processing or other thing. It has to know what it needs to be shown on the UI.
6) JSX, the syntactic sugar
With JSX we can write code like this.
But Without JSX we have to do tiresome task. But Dom can’t read JSX syntax that’s why Babel traspiles the JSX into following code.
7) React Component vs Element
Component and Element, these two terms are very common in React. Component is a forma or template or blueprint with a render method. It can be either functional or class component.
Element is the output of the component. But element is not what we see in the browser but it is an object which we get from render method. This object tells dom what needs to represent.
8) Optimizing Performance
React offers different techniques to maximize the performance in the production build like Single File Builds, Brunch, Browserify, Rollup. This techniques helps to minify the files in the development phase into small amount of files to increase the performance.
9) defaultProps, displayName, props, state
It is the default props if any component don’t set any value to props, component will render according to default props value.
It is used in debugging messages. It is not necessary to explicitly put a value into it but for the convenience of debugging one can do that.
In function declaration we use pass some parameter into it. Like this, in component what use as parameter is called props. props.children is a special kind of props which is defined as children of the JSX tags.
It is value which changes over rendering or data flow. In the useState hooks we get two values, getter and setter. Getter is for getting the output value and setter function is to set value on any particular action. setter function is asynchronous.
10) Booleans, Null, and Undefined Are Ignored
Boolean values true or false, null, undefined are not rendered by react component. Following code gives the same result as a 1st line code.