A React interview question: What are rendered in the browser, components and elements?

A React interview question: What are rendered in the browser, components and elements?

Crazy technology house front-end pioneer

The answer to this question is a bit complicated.

❝First of
all, we must find out if element and component are the same thing?
❞

Technically speaking, ReactDOM does not render React components or React elements in the DOM. It renders DOM elements supported by its component instance. This is correct for class components. But for functional components, ReactDOM only renders DOM elements. The function component has no instance (accessible through this), so when using the function component, ReactDOM will render the DOM element generated by the element returned by the function.

What you need to understand here is that React elements are different from DOM elements. React elements are just "descriptions" of HTML elements, React components, or a mixture of them.

Well, a better interview question might ask this: When you use something like <MyComponent/> in JSX, is it a component, element, or instance?

This is an element, but not a DOM element, but a React element. Because any JSX tags will be converted to React.createElement and then called.

But if you want React to continue to use this React element, you must call a function or create an instance from a class.

You may see the terms component, element, and instance in some React tutorials. I am wrong to mix these words here, but I think React beginners need to understand the difference. There is an article on the official React blog dedicated to these concepts, but I think these are far from enough for beginners.

The following are simple definitions of these terms:

• React Component is a template, blueprint, and globally defined. Can be a function or a class (with rendering function).
• React Element is what is returned from the component. This object actually describes the DOM node represented by the component. For function components, this element is the object returned by the function. For class components, the element is the object returned by the component's rendering function. React elements are not what we see in the browser. They are just objects in memory and we cannot make any changes to them.
• React internally finds the DOM element tree that needs to be rendered to the browser by creating, updating and destroying instances. When using a class component, the DOM element rendered by its browser is usually called a component instance. You can render multiple instances of the same component. The instance is the this keyword that you use inside class-based components. You don't need to manually create an instance from the class, just remember that it is in React's memory.
• There are no instances of function-based React elements. A functional component can still be rendered multiple times, but React does not associate a local instance with each rendering. It just uses the function call to determine the DOM element to be rendered for the function.
  Most importantly, ReactDOM does not render components in the browser, nor does it render elements (the term element here stands for the return value of React.createElement). It also does not render instances. It only renders DOM elements.

Unfortunately, it seems common to use the term component to refer to both a template and any kind of instance or call used through the template. It is normal for people to be confused about this, which is quite painful.

Every React application starts with a render call using React elements. Let’s take the HelloMessage case provided by the official website of reactjs.org as an example. I have slightly modified this example to include functional components:

const Today = () => (
  <div>Today is {new Date().toDateString()}</div>
);class HelloMessage extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div>Hello {this.props.name}</div>
        <Today />
      </React.Fragment>
    );
  }
}ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

The first React element is the one we started in the ReactDOM.render call:

<HelloMessage name="Taylor" /> // 这是 React element

This React element describes that the DOM tree to be rendered should start with the HelloMessage component and the value equal to Taylor's prop name.

</>Now answer the question: What is HelloMessage?
Whenever a React element describes a React component (like the React element above), React uses that component to replace the description with the content returned by the component. At this time it will create an instance for the class-based component and keep the reference to the instance in memory. It does not create anything for function-based components. It just calls them.

What is returned from the HelloMessage component is a React element describing the React.Fragment component.

Answer the question: What is React.Fragment?
React will continue to reduce the unknown description of these components until there are only valid DOM nodes. The description of React.Fragment is translated into 2 React elements, one describing the div and the other describing the Today component.

</>Answer the question: What is Today in the code?
It calls the Today function to find the last problem. The Today function returns a React element describing a div.

So far, the virtual tree contains all the React elements describing the DOM node. React uses the consistency comparison algorithm to find out what to update in the browser. The tree node transformed by the component instance retains the ability to modify the instance.