|
Element |
Component |
| It is an object describing what you would like to project on the screen in terms of the DOM nodes or other components. | It is a function or class that accepts an input and returns a React element. |
|
It contains other elements in its props. |
It can be a class with a render() method. |
|
It describes what we want to see on the screen |
It is a template. A blueprint. A global definition. |
|
It is an immutable description object and you can not apply any methods on it |
It has to keep references to its DOM nodes and to the instances of the child components. |
|
There is no any method used. |
The lifecycle method is used for each element. |
|
They are immutable i,e once created cannot be changed. |
The state in a component is mutable. |
|
React Hooks cannot be used with elements as elements are immutable. |
React hooks can be used with both functional and class components |
|
Elements are faster. |
Components are slower. |
|
It is an object representation of a DOM node. |
It is an object representation of the DOM tree. |
|
e.g,
|
e.g,
const LogIn = () => ( <div> <p> Login </p> <button> Continue </button> <button color = “orange”> Cancel </button> </div> );
|