JIYIK CN >

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

ReactElement / ReactElement Factory

ReactNode

ReactComponent / ReactComponent Class

Let’s look at these five types separately.

React Element

The main virtual DOM type in React is ReactElement. ReactElement has four properties: type, props, key, and ref. It has no encapsulated internal methods and has nothing on the prototype.

This type can be created through React.createElement.

var root = React.createElement('div');

For the specific usage of React.createElement, you can refer to the article "Detailed Explanation of the Use of React.createElement Method" .

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

Normally we should not confuse ReactElement with real DOM elements. 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 attributes to ReactElement, we can pass the attribute object as the second parameter of the createElement method, and then its child nodes can be 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'));

Similarly, these are introduced in the article "Detailed Explanation of the Use of React.createElement Method" .

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

var root = <ul className="my-list">
             <li>Text Content</li>
           </ul>;
ReactDOM.render(root, document.getElementById('example'));

The elements created by the two can be considered equivalent.

Factories

ReactElement-factory is a simple factory method that generates ReactElement with a specific type of attributes. React comes with a built-in helper to make it easy for you to create this factory method. As shown below

function createFactory(type) {
  return React.createElement.bind(null, type);
}

For the use of createFactory, you can refer to the article "React Factory Method - Detailed Explanation of CreateFactory Use" . Well, let's continue.

The createFactory method provides us with a very convenient way to create ReactElement. We no longer need to always use React.createElement('div') to create it.

var div = React.createFactory('div');
var root = div({ className: 'my-div' });
ReactDOM.render(root, document.getElementById('example'));

In addition, React also has built-in factory methods for standard HTML tags, as shown below:

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 just 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 must be returned using render, which means that render must be in the first parameter of createClass (which is an object as we can see). The returned object is the specified ReactComponent. For more information about the use of React.createClass, please refer to "Instructions for using createClass in React"

var component = new MyComponent(props); // Never write this

It is best not to call this except for testing. Leave it to React and it will do it for you.

You can pass a ReactComponent to createElement and get a ReactElement back.

var element = React.createElement(MyComponent);

Or you can use JSX syntax

var element = <MyComponent />;

When element is passed to ReactDOM.render, React will call the constructor to create a ReactComponent. The following example shows

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, they will return the same instance object. And this instance is stateful.

var componentA = ReactDOM.render(<MyComponent />, document.getElementById('example'));
var componentB = ReactDOM.render(<MyComponent />, document.getElementById('example'));
componentA === componentB; // true

This is why you don't instantiate objects yourself. Instead, ReactElement is a virtual ReactComponent before it is constructed. The original ReactElement and the new ReactElement are compared to see if a new ReactComponent needs to be created or if the existing one needs to be reused.

The above is a brief introduction to these commonly used React terms. This article is basically a translation of the official document. The use of the functions involved in it is indicated in the article. I hope this article will be helpful for everyone to learn React.