Elements, components, instances and nodes in React and react

Elements, components, instances and nodes in React and react

The React in-depth series provides an in-depth explanation of key concepts, features, and patterns in React, aiming to help you understand React and use React more flexibly in your project.

Elements, components, instances, and nodes in React are four closely related concepts in React and four concepts that can easily confuse beginners of React. Now, the veteran cadres will introduce these four concepts in detail, as well as their connections and differences, to satisfy the curiosity of those who like to chew and answer questions (the veteran is one of them.

Element)

The React element is actually a simple JavaScript Object. A React element corresponds to a part of the DOM on the interface and describes the structure and rendering effect of the DOM. Generally, we use JSX syntax to create React elements, for example:

const element = 

Element is a React element. During the compilation process, the JSX syntax is compiled into a call to React. createElement (). From this function name, we can see that the JSX syntax returns a React element. The compiled result of the above example is:
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!');
Finally, the element value is similar to the following simple JavaScript Object:
const element = { type: 'h1', props: {  className: 'greeting',  children: 'Hello, world' }}
React elements can be divided into DOM elements and component elements. DOM-type elements use DOM nodes such as h1, div, and p to create React elements. The preceding example shows a DOM-type element. component-type elements use the React component to create a React element, for example:
const buttonElement = <Button color='red'>OK</Button>;
A buttonElement is an element of the component type. Its value is:
const buttonElement = { type: 'Button', props: {  color: 'red',  children: 'OK' }}
For DOM elements, React knows how to render them because they correspond directly to DOM nodes on the page. However, for components, such as buttonElement, React cannot directly know the structure of the page DOM that the buttonElement should be rendered. In this case, the component itself needs to provide the DOM node information that the React can recognize, the implementation method is described in detail when introducing components.
With the React element, how should we use it? In fact, in most cases, we will not directly use the React element, and the React will automatically render the final page DOM Based on the React element. More specifically, the React element describes the structure of the React virtual DOM, which renders the real DOM of the page based on the virtual DOM.
Component)
The React component should be the most familiar concept in React. React splits the interface into reusable modules based on the idea of components. Each module is a React component. A React application is composed of several components. A complex component can also be composed of several simple components.
The React component is closely related to the React element. The core function of the React component is to return the React element. Here you may have a question: Shouldn't the React element be returned by React. createElement? However, the call to React. createElement () also requires the "person" to be responsible. The React component is the "person in charge ". The React component is responsible for calling React. createElement () and returning the React element for the React to render it into the final page DOM.
Since the core function of a component is to return the React element, the simplest component is a function that returns the React element:
function Welcome(props) { return 
Welcome is a component defined by a function. If you use a class to define a component, the React element is returned by the render method of the component. For example:
class Welcome extends React.Component { render() {  return 
In fact, the render method is the only required method for components defined by classes. The Life Cycle methods of other components are only for the render service and are not required.
Consider the following example:
Class Home extends React. component {render () {return (<div> <Welcome name = 'old cadres'/> <p> Anything you like </p> </div> )}}
The Home component uses the Welcome component, and the returned React element is:
{Type: 'div ', props: {children: [{type: 'Welcome', props: {name: 'old cadres' }}, {type: 'P', props: {children: 'Anything you like' }},]}
For this structure, React knows how to render nodes with type = 'div 'and type = 'P', but does not know how to render nodes with type = 'Welcome, when the React discovers that Welcome is a React component (the initial character of Welcome is capitalized), the React element returned by the Welcome component determines how to render the Welcome node. The React element returned by the Welcome component is:
{Type: 'h1 ', props: {children: 'Hello, veteran '}}
This structure only contains DOM nodes, and React knows how to render them. If this structure contains other component nodes, React will repeat the above process and continue to parse the React elements returned by the corresponding component until the returned React element contains only DOM nodes. This recursive process allows the React to obtain the complete DOM structure information of the page, and the rendering work is naturally ready.
In addition, if you think carefully, you can find that the React Component reuse is essentially to reuse the React element returned by this component. The React element is the most basic component of the React application.
Instance)
The instance here refers to the instance of the React component. A React component is a function or class. In actual work, it acts as an instance object of the React component. Only after the component is instantiated, each component instance has its own props and state, and holds a reference to its DOM node and child component instance. In the traditional object-oriented development method, the instantiation work is manually completed by the developer, but in React, the instantiation work of components is automatically completed by React, component instances are also directly managed by React. In other words, developers do not have to worry about creating, updating, or destroying component instances.
Node)
When you use PropTypes to verify component properties, there is a type like this:
MyComponent.propTypes = {  optionalNode: PropTypes.node,}
What type is PropTypes. node? This indicates that optionalNode is a React node. A React node is a data type that can be rendered by React, including numbers, strings, React elements, or an array containing these types of data. For example:
// Number-type node function MyComponent (props) {return 1;} // string-type node function MyComponent (props) {return 'mycomponent ';} // function MyComponent (props) {return <div> React Element </div> of the React Element type;} // array-type node, the array element can only be another valid React node function MyComponent (props) {const Element = <div> React element </div>; const arr = [1, 'mycomponent ', element]; return arr;} // error. It is not a valid React node function MyComponent (props) {const obj = {a: 1} return obj ;}
Finally, the React elements and components are the most important and confusing concepts. You can understand the concept of React component instances and are rarely able to use them. React nodes have certain application scenarios, however, after reading this article, there should be no understanding problem.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.