Wen: Xu Chao, author of React Advanced Road

Authorized to publish, reprint please indicate the author and source

React In-depth series provides in-depth explanations of key concepts, features, and patterns in React to help you understand React and use React flexibly in your projects.

React elements, components, instances, and nodes are closely related concepts in React. They are also easily confused by React beginners. Now, the veteran cadres will introduce these four concepts in detail, as well as the connection and difference between them, to satisfy the curiosity of the students who like to chew the truth and ask questions (veteran cadres are one of them).

Element (Element)

The React element is 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 that part of the DOM. Normally we create React elements using JSX syntax, for example:

const element = <h1 className='greeting'>Hello, world</h1>;
Copy the code

Element is a React element. At compile time, the JSX syntax is compiled into a call to react.createElement (). As you can see from the function name, the JSX syntax returns a React element. The above example results when compiled:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world! '
);
Copy the code

Finally, element’s value is a simple JavaScript object like the following:

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'}}Copy the code

React elements can be divided into two types: DOM type elements and component type elements. React elements use DOM nodes like h1, div, and p to create React elements. The previous example was a DOM element. Use the React component to create React elements, for example:

const buttonElement = <Button color='red'>OK</Button>;
Copy the code

ButtonElement is an element of component type and its value is:

const buttonElement = {
  type: 'Button',
  props: {
    color: 'red',
    children: 'OK'}}Copy the code

For DOM elements, React knows how to render because they correspond directly to the DOM node on the page. However, for component-type elements, such as buttonElement, React cannot directly know which structure of the PAGE DOM should be rendered into buttonElement. In this case, the component itself needs to provide the DOM node information that React can recognize. The specific implementation method will be introduced in detail in the introduction of the component.

Now that we have the React element, how do we use it? In most cases, the React element will not be used directly. The React element will automatically render the final DOM of the page. More specifically, the React element describes the structure of the React virtual DOM, from which React renders the actual DOM of the page.

Components (Component)

The React component is probably the most familiar concept from React. React uses the idea of components to divide the interface into reusable modules. Each module is a React component. A React application is composed of several components, and a complex component can also be composed of several simple components.

The React component is closely related to the React element. The React component’s core function is to return the React element. Here you might wonder: Shouldn’t the React element be returned by react.createElement ()? But the React. CreateElement () call itself needs to be handled by a person, and the React component is that person. The React component is responsible for calling the React.createElement(), which returns the React element for internal rendering 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 <h1>Hello, {props.name}</h1>;
}
Copy the code

Welcome is a function defined component. If a class is used to define a component, the task of returning the React element is handled by the component’s Render method, for example:

class Welcome extends React.Component {
  render() {
    return<h1>Hello, {this.props.name}</h1>; }}Copy the code

In fact, the Render method is the only method required to use a class-defined component; the other component’s lifecycle methods are simply render services and are not required.

Now consider the following example:

class Home extends React.Component {
  render() {
    return (
      <div>
        <Welcome name='Veteran cadre' />
        <p>Anything you like</p>
      </div>
    )
  }
}
Copy the code

The Home component uses the Welcome component and returns the React element:

{
  type: 'div',
  props: {
    children: [
      {
        type: 'Welcome',
        props: {
          name: 'Veteran cadre'}}, {type: 'p',
        props: {
          children: 'Anything you like'}},]}}Copy the code

React knows how to render nodes of type=’ div’ and type=’ p’, but doesn’t know how to render nodes of type=’Welcome’. When React discovers that Welcome is a React component, it decides how to render the Welcome node based on the React element returned by the Welcome component. The React element returned by the Welcome component is:

{
  type: 'h1',
  props: {
  	children: 'Hello, old cadre. '}}Copy the code

This structure contains only DOM nodes, and React knows how to render. If there are other component nodes in the structure, React repeats the process and continues parsing the React elements returned by the corresponding component until the React elements returned contain only DOM nodes. This recursive process gives React access to the complete DOM structure of the page, and renders work naturally.

In addition, if you think about it carefully, you can see that the reuse of the React component is essentially to reuse the React element returned by the component. The React element is the basic constituent unit of the React application.

Example (Instance)

The instance here refers specifically to the instance of the React component. The React component is a function or class that is instantiated by the React component. Only after a component is instantiated does each component instance have its own props and state and hold references to its DOM nodes and child component instances. In traditional object-oriented development, instantiation is done manually by developers, but in React, component instantiation is done automatically and component instances are managed directly by React. In other words, the developer doesn’t have to worry about creating, updating, and destroying component instances.

Node (the Node)

When using PropTypes to validate component properties, there is a type:

MyComponent.propTypes = { 
  optionalNode: PropTypes.node,
}
Copy the code

What type of proptypes.node? This indicates that the Option Node is a React node. React nodes are data types that can be rendered by React, including numbers, strings, React elements, or an array containing these types of data. Such as:

// Node of numeric typefunction MyComponent(props) {
  return1; } // String nodefunction MyComponent(props) {
  return 'MyComponent'; } // React element type nodefunction MyComponent(props) {
  return<div>React Element</div>; } // Array type nodes. Array elements can only be other valid React nodesfunction MyComponent(props) {
  const element = <div>React Element</div>;
  const arr = [1, 'MyComponent', element];
  returnarr; } // Error, not a valid React nodefunction MyComponent(props) {
  const obj = { a : 1}
  return obj;
}
Copy the code

To summarize, the React element and component concepts are the most important and confusing; The React component instance concept is familiar, but rarely used. The React node has certain usage scenarios, but this article should not be a problem to understand.

The next preview:

React In-depth Series 2: Component classification

The React Way To Progress

Author: Xu Chao

Graduated from Zhejiang University, master degree, senior front-end engineer, long-term work in energy Internet of things company Vision Intelligence. 8 years of software development experience, familiar with big front-end technology, rich experience in Web front-end and mobile terminal development, especially in React technology stack and mobile Hybrid development technology in-depth understanding and practical experience.

In 2019, iKcamp’s original new book Koa and Node.js Development Actual Combat has been sold on JD.com, Tmall, Amazon and Dangdang!