React DOM is browsers’ programming interface for HTML (and XML) documents that treats them as tree structures. The DOM API can be used to change a document structure, style, and content.
Each component in React has a lifecycle which we can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting. Just like HTML, React can perform actions based on user events. React has the same events as HTML: click, change, mouseover etc.
How Virtual-DOM Works in React
DOM, abbreviated as Document Object Model, is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it’s properties of a website as it’s nodes. DOM provides a language-neutral interface that allows accessing and updating of the content of any element of a webpage.
Understand how DOM is build
ReactDOM is a package that 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. ReactDOM provides the developers with an API containing following methods and a few more.
Lifecycle of Components
Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence. A React Component can go through four stages of its life as follows.
- Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
- Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
- Updating: Updating is the stage when the state of a component is updated and the application is repainted.
- Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.
Explaining React Life Cycle:
A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. We can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be our final UI. There are two types of Components:
- Functional Components
- Class Components
ReactJS Define PropTypes
- We can easily open up a component and check which props are required and what type they should be.
- When things get messed up React will give you an awesome error message in the console, saying which props is wrong/missing plus the render method that caused the problem.
React Optimizing Performance
React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways we can speed up your React application.
- Use the production build
- Create React app
- Single file builds
- Roll up
- Web pack
- Profiling Components with the Chrome Performance Tab
10. Profiling Components with the DevTools Profiler