Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what terms are commonly used in React virtual DOM", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what are the commonly used terms in React virtual DOM?"

Of all the terms in React, there are five core types that we need to remember. These five types are

ReactElement / ReactElement Factory

ReactNode

ReactComponent / ReactComponent Class

Let's take a look at these five types.

React Element

The main type of virtual DOM in React is ReactElement. ReactElement has four properties, which are type,props,key and ref. It has no internal methods to encapsulate, and there is nothing on the prototype.

This type can be created through React.createElement.

Var root = React.createElement ('div')

In order to render as a new DOM tree, we can create elements of type ReactElement and pass them to the ReactDOM.render method for rendering. Of course, these ReactElement can also have regular DOM elements (including HTML elements, SVG elements, and so on).

In general, we should not confuse ReactElement with the real DOM element. A ReactElement is a lightweight, stateless, immutable element, which is a virtual DOM element. The rendering method is as follows

ReactDOM.render (root,document.getElementById ('content'))

If we want to add an attribute to the ReactElement, we can take the property object as the second parameter of the createElement method, and then its child node as the third parameter.

Var child = React.createElement ('li', null,' Text Content')

Var root = React.createElement ('ul', {className:' my-list'}, child)

ReactDOM.render (root, document.getElementById ('example'))

Again, these are described in the article "detailed explanation of the use of the React.createElement method."

If we were to use React's JSX syntax, these ReactElement elements could be created like this.

Var root =

Text Content

ReactDOM.render (root, document.getElementById ('example'))

The elements created by the two can be considered equivalent.

Factories

ReactElement-factory is a simple factory method for generating ReactElement with attributes of a specific type. React comes with a built-in help manual so that you can easily create this factory method. As shown below

Function createFactory (type) {

Return React.createElement.bind (null, type)

}

The createFactory method gives us a convenient way to create a ReactElement, and we can no longer create it using React.createElement ('div') all the time.

Var div = React.createFactory ('div')

Var root = div ({className: 'my-div'})

ReactDOM.render (root, document.getElementById ('example'))

In addition, React has built-in factory methods for standard HTML tags, as shown in the following example

Var root = React.DOM.ul ({className: 'my-list'})

React.DOM.li (null, 'Text Content')

);

React Nodes

A React node can be any of the following

ReactElement

String (aka ReactText)

Number (aka ReactText)

Array of ReactNodes (aka ReactFragment)

React Components

Of course, we can only use ReactElement when using React, but if you want to take full advantage of React, then you must consider using ReactComponents to encapsulate stateful components.

A ReactComponent class is just a Javascript class.

Var MyComponent = React.createClass ({

Render: function () {

...

}

});

When this constructor is called, at least one object is returned using render, which means that there must be a render in the first parameter of createClass (which we see is an object). The object returned is the specified ReactComponent. About the use of React.createClass, we can refer to "instructions for getting started with React createClass".

Var component = new MyComponent (props); / / Don't write like that

In addition to testing, it is best not to call it this way. Leave this to React, and it will be done for you.

You can pass ReactComponent to createElement so you can get a ReactElement.

Var element = React.createElement (MyComponent)

Or you can use JSX syntax

Var element =

When element is passed to ReactDOM.render, React will call the constructor to create a ReactComponent, as shown in the following example

Var component = ReactDOM.render (element, document.getElementById ('example'))

If you call ReactDOM.render multiple times and pass it the same type of ReactElement and the same DOM element container. Then they will return the same instance object. And this instance is stateful.

Var componentA = ReactDOM.render (, document.getElementById ('example'))

Var componentB = ReactDOM.render (, document.getElementById ('example'))

ComponentA = componentB; / / true

That's why you don't want to construct instantiated objects yourself. Conversely, ReactElement is a virtual ReactComponent component before it is constructed. The original ReactElement is compared with the new ReactElement to see if a new ReactComponent component needs to be created. Or whether the pre-existing ones need to be reused.

The above is about the content of this article on "what are the common terms in React virtual DOM?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.