what is react element

In react, element is the smallest building unit, an object, not DOM; element can be defined using jsx in the code, and the syntax is "const element =..."; after Element is created, it is It cannot be changed. If you want to change the DOM, you can only create a new Element.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is react element

Element

1.Element is the smallest building unit in react. It is an object and not a DOM. The cost of creation is relatively high. 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 After that, 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.

Extended knowledge:

Virtual DOM

1.React does not directly build DOM elements, but by creating An object 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. Then update the DOM based on the recorded differences.

ReactElement

1. Virtual 'DOM';

2. Essentially an immutable object;

type attribute: If it is a string such as 'h1', it represents a DOM node, and its props attribute is the attribute of the DOM node. If the type attribute is a

function representing a component 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;

[Related recommendations: javascript video tutorial、webfrontend】

The above is the detailed content of what is react element. For more information, please follow other related articles on the PHP Chinese website!