Nowadays React Js has been quite a popular framework for web development. It has some incredible features to offer that made it so successful. Here, I present 10 of them that I find interesting —
Virtual DOM:
The virtual DOM (VDOM) 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.
DOM manipulation in most JavaScript frameworks get the DOM updated/rebuilt in its entirety in response to any change, even for a very small change. Modern websites may have a lot of data and may use a big amount of DOM manipulation. In such a scenario the process gets very inefficient.
The Virtual DOM acts like a blueprint for the real DOM. For every DOM object react creates a corresponding virtual DOM object which becomes a representation of the DOM. Such a VDOM same properties as real DOM but lacks the power to change the screen display elements directly. Manipulating DOM might be slow but manipulating the VDOM is faster as nothing is onscreen. Though VDOM update also makes all of the VDOM objects updated, it is still incredibly faster as mentioned before. Once VDOM gets updated, react compares the updated VDOM with the immediate previous VDOM (before the update). This way react gets to know exactly which VDOM objects got changed and it makes only and only that change to the actual DOM to show on screen.
Thus, react updates only the required parts of the DOM making it very efficient.
JSX :
The JSX in react is a syntactic version of writing just the function React.createElement(component, props, ...children). And the code format for JSX is,
const jsxElement = <h1 className= ”greeting”> Hello World ! </h1>
This is called JSX and it is a syntax extension of JavaScript. This code compiles into React.createElements() calls, this way,
React.createElemet(
‘h1’,
{className: ‘greeting’},
‘Hello World !’
)
This function in turn converts into a object like,
const jsxElement = {
type: ‘h1’,
props: {
className: ‘greeting’,
children: ‘Hello World !’
}
}
Embedding expressions in JSX
Valid JavaScript expressions can be embedded in a JSX code, such as
const user = “Tom Cruise”
const jsxElement = <h1> Hello, {user} </h1>
React Elements:
Elements are the building blocks for components. An example for a simple element is such,
const element = <h1>I am an Element</h1>
Rendering Elements:
React apps usually have a single root DOM node in the HTML file, which is <div id="root"></div> and react DOM manages everything inside it.
In order to render a react element in the root DOM node, both of them have to passed into ReactDOM.render().
const element = <h1>I am an Element</h1> ;
ReactDOM.render(element, document.getElementById("root"));
Components:
Components are JavaScript functions that take arbitrary inputs as props and return the elements for UI. It allows the developer to work with different sections of the app discreetly.
Component is defined as a JavaScript function,
function Greeting (props) {
return <h1>Hello, {props.name}</h1>
}
Now this function can be called as component <Greeting /> .
Class Components:
Components a]can also be defined as ES6 class. Both function and class components have the same features.
class Greeting extends React.Component {
render () {
<h1>Hello, {this.props.name}</h1>
}
}
Both ways of defining components are equivalent to react.
Component rendering:
Rendering a component is the same as rendering an element. The element here shall represent the component defined.
function Greeting (props) {
return <h1>Hello, {props.name}</h1>
}
const element = <Greeting />;
ReactDOM.render(
element,
document.getElementById(“root”)
);
Component Lifecycle:
There are many component lifecycle methods to be called upon either the rending of the component (called “mounting” in react) or removal of the component (called “Unmounting” in react) or change in the props or state (called “updating” in react).
The commonly used Lifecycle methods are as given below,
mounting
These methods are called in the following order when an instance of a component being created and inserted into the DOM.
constructor()
render()
componentDidMount()
updating
An update can be caused by the change in props or state. These methods are called in the following order when a component is re-rendered.
render()
componentDidUpdate()
unmounting
This method is called when a component gets removed from the DOM.
componentWillUnmount()
Other APIs and Properties:
There are Two other APIs that can be called from the component,
setState()
forceUpdate()
There are properties of two categories, and they are class properties and instance properties.
Class Properties
defaultProps
displayName
Instance Properties
props
state
Sources: VDOM, JSX, elements, components and props, state and lifecycle, default props
Top comments (19)
componentWillUnmount() method has been deprecated, it is removed from the component life cycle. instead of you can use getderivedstatefromprops () life cycle method.
Thank you for your feedback. I will check that.
Is it?
I think you are talking about componentWillMount assuming by the alternate you suggested.
can you please share any docs that says the same about componentWillUnmount.
Thank you for your feedback. I appreciate your thoughtful insight.
Here is the react documentation which I mentioned in the "sources" as well. reactjs.org/docs/react-component.h...
Nonetheless, I will cross validate your concern.
I find your article informative.
My comment was intended for Abu Jaid
I am delighted that you find my article informative. This is an inspiration for me. Thank you.
Please, keep on reading my articles.
Hi, @shubh710 please refer to official docs here reactjs.org/docs/react-component.html, it can help to understand the life cycle of components.
dev.to/abu/comment/1egf0
Here your comment says "componentWillUnmount() method has been deprecated"
I didn't find that in the official docs
reactjs.org/docs/react-component.html
reactjs.org/docs/react-component.h...
That is exactly what I have been talking about whole discussion.
@abu has mentioned componentWillUnmount is deprecated.
But I think WILL UNMOUNT is not deprecated.
Instead componentWillMount is deprecated.
That's what the URL shared by @lucasoneves says WILL MOUNT is deprecated(not WILL UNMOUNT).
Keep posting!
Thank you for your inspiration. Sure! I will try my best. You guys are awesome <3
You're welcome!
I think by now Hooks should be listed as a basic concept
Thank you for your thoughtful feedback.
Thank you
You are welcome.
Thank you for your feedback :) Nice
How will the vDOM gets cross referred with the DOM. And does JS particularly update that specific section in the DOM.