In react, element is the smallest building unit, an object, not a DOM; element can be defined in code using jsx, and the syntax is "const element =..."; Element cannot be changed after it is created. If you want to change the DOM, you can only create a new Element.
The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.
Element
1.Element is the smallest building unit in react. It is an object, not a DOM, and the cost of creation is relatively low.
(1) Usually we use JSX to define an Element in the code:
const element = <h1>Hello, world</h1>;(2) Use ReactDOM.render to render
ReactDOM.render( element, document.getElementById('root') );2. Once an Element is created, it cannot be changed. It is like a frame in a movie. If you want to change the display of the DOM, you can only create a new Element.
3. React will compare the two Elements before and after, and only update the content that needs to be updated.
Expand your knowledge:
Virtual DOM
1. React does not directly construct DOM elements, but creates objects similar to the DOM structure. Then the real DOM is rendered based on this structure, which is React DOM.
2. When there is a change, create a new object, compare it with the previous structure, and record the difference between the two. You can look at the diff algorithm here.
3. The DOM is then updated based on the recorded differences.
ReactElement
1. Virtual 'DOM';
2. The essence is an immutable object;
type attribute: If it is a string such as 'h1', it represents a DOM node, and its props attribute is for the attributes of the DOM node. If the type attribute is a component that represents
function or class, it represents a component;
3. The two types of ReactElement can be nested in each other and mixed with each other to describe the DOM tree;